Css 特定性如何与继承的样式一起工作？

HTML

<div class='container'>
  <p>foo</p>
</div>

---

应用的颜色是蓝色。为什么会这样？我在想，既然

.container

比

p

更具特异性，那么颜色最终会变成红色

这里发生了什么？为什么它是蓝色的

---

我的假设是，这个过程是“是否有任何选择器？如果有，请使用它，不要查找

.container

。如果它没有任何样式，它会查找并使用

.container

”

的样式。在这种特定情况下，请将css视为靶子。 从指向所讨论元素的最具体指针开始

在上面的示例中，它是

p

选择器，因为文本位于

p

标记包装器中。然后从那向外（如果你愿意的话，公牛眼正外面的环）是

.container

div

。由于目标

p

最接近要着色的文本，因此它继承了css（蓝色文本）

在以下示例中：

.container{
颜色：红色；
}
p{
颜色：蓝色
}

我应该是红色文本，因为我在p标签之外，但在div容器内
福

来自MDN页面的Specifity

无论继承规则的特殊性如何，直接目标元素的样式始终优先于继承的样式

---

因此无论发生什么情况，

p

都将覆盖

.container

。当规则针对同一元素时，将覆盖从

.container

继承的样式。标记最初继承

颜色：红色来自其父级。然后你告诉它是
颜色：蓝色以覆盖父样式。特殊性还包括相应DOM元素的层次结构。在这种情况下，
%p
比
%div.container
更具体，因为
%div.container
比
%p
高一级。
.container {
  color: red;
}

p {
  color: blue
}