嵌套CSS选择器的特异性 [英] Specificity of Nested CSS Selectors
问题描述
我想知道为什么Item One不显示为橙色，如下所示。根据特异性规则，选择器 .one.two 应具有20的特异性得分（两个类）。 .one li 应该有11（一个类，一个元素）。
I am trying to figure out why "Item One" does not show as orange, below. According to specificity rules, the selector .one.two, should have a specificity score of 20 (two classes). .one li should have 11 (one class, one element). So it feels like it should show as orange, not blue.
任何想法为什么它不会？
Any idea why it doesn't?
另外，作为一个问题，为什么我不能在 .one 和 .two 在 .onetwo 选择器中？这适用于Chrome似乎，但不是这里。
Also, as a side question, why can't I have a space between the .one and the .two in the .one.two selector? That works for Chrome it seems, but not here.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
color: red;
}
.two {
color: green;
}
.one li {
color: blue;
}
.one.two {
color: orange;
}
</style>
</head>
<body>
<div>
<ul class="one two">
<li>Item One</li>
</ul>
</div>
</body>
</html>
推荐答案
所以感觉应该显示为橙色，而不是蓝色。
So it feels like it should show as orange, not blue.
它不会？
您的 ul >橙色。但是你的 li 是蓝色，独立于其父的颜色，因为你明确定位并应用了颜色。如果覆盖隐式 color：inherit ，它将不会继承其父级的颜色。
Your ul is orange. But your li is colored blue independently of the color of its parent because you have explicitly targeted it and applied a color to it. It will not inherit its parent's color if you override the implicit color: inherit.
为什么我不能在.one和.two之间在.one.two选择器中有一个空格？
why can't I have a space between the .one and the .two in the .one.two selector?
一个完全不同的选择器。 .one .two 匹配 .two 里面 a 。一个。 .onetwo （无空格）匹配 .one 和 .two 。
Because that's a completely different selector. .one .two matches a .two inside a .one. .one.two (with no space) matches an element that is both .one and .two.
<div class="one">
<div class="two"></div> /* matched by .one .two */
</div>
<div class="one two"></div> /* matched by .one.two */
这篇关于嵌套CSS选择器的特异性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
