CSS - 仅颜色直接文本/不继承给其他子类

Question

我知道类似的问题已经被问过至少几十次(至少我找到了十几次)，但我找到的许多答案都没有解决我的问题。

我只想为这些 <h3> 中直接(!)的文本着色标签:

<div class="page-header">
  <h3> I want this green <div class="page-header-button-group">But not this</div></h3>
</div>

请注意:我无法更改 html 中的任何内容。我试过这个:

.page-header > h3:first-child{
  color:green;
}

但遗憾的是它没有做我需要的。

Answer 1

这应该对你有帮助。

h3 {
  color: green;
}

h3>* {
  /* all children of h3 */
  color: black;
}

<div class="page-header">
  <h3> I want this green
    <div class="page-header-button-group">But not this</div>
  </h3>
</div>