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

这应该对你有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

问题是，未指定color的默认值，其值是从父级继承的（请参阅w3schools）。这意味着，由于您为<h3>指定了颜色而<div>没有其他颜色规则，因此它将从其父级继承颜色。

唯一的解决方案是使用额外规则为每个孩子重置颜色。 h3:first-child > *（任何直接与h3相关的元素）。

＆＃13;

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

＆＃13;

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

＆＃13;

如果这是您网页中的常见内容，您可能还会想到一个类，例如：.color-default { color: #000; }（可以添加!important）。然后你可以将div定义为<div class="default-color">。