如何影响标签内除特定子标签之外的所有内容

Question

我有以下代码示例

<div>
  <h1>
    <strong>STRONG Line #1, Intended to stay the same aqua</strong><br>
    Line #2, Intended to be Yellow.
  </h1>
</div>
<span>Line #3, not in the div at all.</span>

h1 {
  background-color: aqua;
}

/* option 1 */
div h1:not( > strong) {
  background-color: yellow;
}

/* option 2 */
div h1:not(:first-child) {
  background-color: yellow;
}

我正在尝试影响除 内容之外的所有 h1 内容

我尝试使用子组合器和 :first-child 选择器但不能，提前感谢

这是测试控制台 开发者.mozilla

Answer 1

如果您直接定位

strong

中的

h1

元素，则可以将其样式设置为与其余内容不同。请参阅以下示例：

h1 {
  background-color: aqua;
}

div h1 strong {
  background-color: yellow;
}

<div>
  <h1>
    <strong>STRONG Line #1, Intended to stay the same aqua</strong><br>
    Line #2, Intended to be Yellow.
  </h1>
</div>
<span>Line #3, not in the div at all.</span>