Question

* {
  color: yellow
}
.outermost {
  color: blue
}
.middle {
  color: red
}

<div class="outermost">
  <div class="middle">
    <p>Some Text</p>
  </div>
</div>

我希望<p>Some Text </p>的颜色为红色，因为<div class="middle">是其父级。但是，颜色最终变为黄色。这似乎违反直觉，因为全局选择器的特定性不如父容器。为什么p元素继承自global，以及如何更改它以便从父容器继承？

Answer 1

在 @ j08691 评论中注明，通用选择器*对特异性没有影响：

* {
  color: yellow;
}
.middle {
  color: red;
}

<div class="middle">
  <p>Some Text</p>
</div>

如果您希望在正常效果下操作的特异性，请将*更改为body：

body {
  color: yellow;
}
.middle {
  color: red;
}

<div class="middle">
  <p>Some Text</p>
</div>

Answer 2

您将inheritance与specificity混为一谈。那些并不是一回事;它们是CSS中完全不相关的概念。

全局选择器的特异性比.middle类选择器低得多，但这是无关紧要的，因为.middle选择器没有定位到您的p元素;它定位到p元素的父级。

通常情况下，p使用红色文本就足够了，因为默认情况下，p将color属性设置为名为inherit的特殊值，使它从它的父元素继承它的颜色。但p并未使用默认值（inherit）作为其颜色属性，因为您有一条匹配规则明确告知使用黄色：

* {
  color: yellow;
}

继承在这里甚至没有发挥作用，因为你的p元素不是设置为首先从它的父级继承。

您可以使用具有更高特异性的选择器覆盖该行为，该选择器以包含您的文本的元素（而不仅仅是其中一个祖先）明确告诉它从其父级继承：

＆＃13;

* {
  color: yellow;
}
.outermost {
  color: blue;
}
.middle {
  color: red;
}
.middle > p {
  color: inherit; // This overrides the rule defined by the global selector above
}

＆＃13;

<div class="outermost">
  <div class="middle">
    <p>Some Text</p>
  </div>
</div>

＆＃13;

或者，您可以停止使用全局选择器，而是依靠继承为大多数元素设置文本颜色：

＆＃13;

body {
  color: yellow;
}
.outermost {
  color: blue;
}
.middle {
  color: red;
}

＆＃13;

<div class="outermost">
  <div class="middle">
    <p>Some Text</p>
  </div>
</div>

＆＃13;

请注意，出于多种原因，通常不鼓励使用全局选择器进行此类操作。

为了帮助您更好地理解您当前代码无法正常运行的原因，这里基本上是它正在做的事情：

＆＃13;

<div style="color:blue;"> <!-- Matches * and .outermost. Result: Blue -->
  <div style="color:red;"> <!-- Matches * and .middle. Result: Red -->
    <p style="color:yellow;">Some Text</p> <!-- Matches *. Result: yellow -->
  </div>
</div>

＆＃13;

Answer 3

这就是你如何定位“中间”类https://jsfiddle.net/DIRTY_SMITH/cfckvvzw/3/

中的字体

.middle > p {
  color: red
}

从全局选择器继承

3 个答案: