用于排除所有子项的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;
}

RESULT

  

    

不要选择此项。

  

     

我可以选择此内容。

     

如何仅选择此项？

目的

  

    

不要选择此项。

  

     

我可以选择这个。

     

如何仅选择此内容？

JSFIDDLE

请注意，我需要这个用于网页抓取，即目标是找到合适的选择器，如果可能的话。

Answer 1

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

你尝试过这样的事吗？

Answer 2

而不是尝试引入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;
}