Селектор CSS, чтобы исключить всех дочерних элементов и выделить остальные в родительском.

Question

Я много искал, но не могу понять это.Пример говорит сам за себя:

HTML

<div class="content">
  <blockquote>
  Do not select this.
  </blockquote>
  <div>
  I can select this.
  </div>
  How do I select only this?
</div>

CSS

.content>:not(blockquote) {
  font-weight: bold;
}

РЕЗУЛЬТАТ

Не выбирайте это.

Я могу выбрать это.

Как выбрать только это?

ЦЕЛЬ

Не выбирайте это.

Я могу выбрать это.

Как выбрать только это?

JSFIDDLE

Обратите внимание, что мне нужноэто для очистки веб-страниц, т.е. цель состоит в том, чтобы найти соответствующий селектор, если это возможно.

Answer 1

Вместо того, чтобы пытаться представить CSS, чтобы ваш HTML выглядел правильно, исправление вашего HTML будет иметь большое значение для сохранения чистоты вашего CSS.

Введите тег <span> для текста, который вы хотите выделить жирным шрифтом,и класс, чтобы сделать изменения стиля, которые вы хотите ввести.Существуют ситуации, когда использование <strong> имеет смысл и с точки зрения смысла, но используйте его, когда вы хотите что-то подчеркнуть, а не когда вы хотите что-то выделить.

Ваш HTML:

<div class="content">
  <blockquote>
  Do not select this.
  </blockquote>
  <div>
  I can select this.
  </div>
  <span class="font-weight-bold">How do I select only this?</span>
</div>

ВашCSS:

.font-weight-bold {
  font-weight: bold;
}

Answer 2

.content {
  font-weight: bold;
}
.content *{
  font-weight: normal;
}

Вы пробовали что-то подобное?