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

我知道类似的问题已经被问过至少十遍了（至少我找到了十二遍），但是我发现的许多答案都不能解决我的问题。

我只想为这些<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;
}

但是可悲的是我没有做我所需要的。

最佳答案

这应该对您有帮助。

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>

关于css - CSS-仅彩色直接文本/不继承其他子类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45438627/