如何用CSS为div文本节点设置样式并排除p元素内容？

需求说明 #

需要用CSS为.container类的div元素的文本节点设置粗体样式，同时排除所有<p>元素内的内容（包括<p>的后代文本）。

示例HTML代码 #

<div class="container">
  should be bold (text node)
</div>

<div class="container">
  <div>
    should be bold
  </div>
</div>

<div class="container">
  <h3>
    should be bold
  </h3>
  <p>
    should not be bold
  </p>
</div>

<div class="container">
  <p>
    should not be bold
  </p>
</div>

<div class="container">
  <div>
    <p>
      should not be bold
    </p>
  </div>
</div>

现有方案的问题分析 #

• 直接设置.container的粗体，会把所有后代元素（包括<p>）都变成粗体：

  .container {
    font-weight: bold;
  }
  

• 使用:first-child:not(p)的方案，无法选中第一个案例中.container直接包含的文本节点：

  .container {
    &:first-child:not(p) {
      font-weight: bold;
    }
  }
  

• 使用.container *选择器，会完全排除.container直接包含的文本节点，只能选中后代元素：

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

正确的CSS方案 #

可以通过先给.container设置粗体，再重置<p>及其所有后代的字体粗细来实现需求，这样既能覆盖文本节点，又不会影响<p>内部的内容，同时保留其他元素的原有样式：

.container {
  font-weight: bold;
}

.container p,
.container p * {
  font-weight: normal;
}

方案说明 #

1. 首先给.container设置font-weight: bold，这会作用于.container的文本节点，以及所有未被后续规则覆盖的后代元素。
2. 然后通过.container p, .container p *选择器，将<p>元素及其所有后代的字体粗细重置为normal，精准排除<p>内部的所有内容。
3. 该方案不会覆盖非<p>后代元素的其他样式，仅调整字体粗细，符合动态设置且保留额外样式的需求。

内容的提问来源于stack exchange，提问作者Remi