Question

HTML

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

CSS

.container {
  color: red;
}

p {
  color: blue
}

Code Pen

应用的颜色为蓝色。为什么是这样？我在想，因为.container比p更具特异性，所以颜色最终会变成红色。

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

我的假设是过程是＆＃34; p是否有任何选择器？如果是这样，请使用它，不要查找.container。如果它没有任何样式，它会查找并使用.container的样式。＆＃34;

Answer 1

来自“规格”的MDN页面

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

因此p无论如何都会覆盖.container。来自.container的继承样式被覆盖

Answer 2

在这个具体案例中将css视为目标靶心。你从最具体的指向你所讨论元素的指针开始。

在上面的示例中，它是p选择器，因为文本位于p标记包装器中。然后从那里向外（如果你愿意的话，在靶心外面的环）是.container div。由于目标p最接近您想要着色的文本，因此它会继承该css（蓝色的颜色文本）。

在下面的示例中：

＆＃13;

.container {
  color: red;
}

p {
  color: blue
}

＆＃13;

<div class='container'>
  i should be red text since im outside the p tag but inside the div container
  <p>foo</p>
</div>

＆＃13;

你看到文字＆＃34;我应该是红色的......＆＃34;并不一定有一个公牛眼＆＃34; css，所以它在一个环外面看到.container并被赋予红色。

======

现在回答您关于特异性的问题

特殊性适用于以下示例的案例：

＆＃13;

.makeMeBlue {
  color: blue;
}

.makeMeBlue.actuallyMakeMeRed {
  color: red;
}

＆＃13;

<div class="makeMeBlue">i am some random text</div>
<div class="makeMeBlue actuallyMakeMeRed">some more text here</div>

＆＃13;

在上面的示例中，您看到make .makeMeBlue具有css以使文本的颜色为蓝色。但是，第二个.makeMeBlue div的文字颜色为红色。这是因为我们更具体地针对第二个元素。我们使用选择器.makeMeBlue.actuallyMakeMeRed利用元素的两个类来表示＆＃34;这是我想要专门定位的元素并将此css分配给＆＃34;。

所以不是像元素一样，开发人员是蓝色的，好吧，我是蓝色的＆＃34;它看到了＆＃34;嘿，有人刚刚说了所有被命名为jason＆＃39;是红色的，我的名字是杰森，我是开发人员 - 这对我来说更具体，所以我会变红＃34;

我希望更清楚地解释特异性。

特异性如何与继承的样式一起使用？

2 个答案: