我想弄清楚为什么下面的“元素一”没有显示为橙色。根据特异性规则，选择器 .one.two 的特异性得分应为 20(二类)。 .one li 应该有 11(一个类，一个元素)。所以感觉它应该显示为橙色，而不是蓝色。
知道为什么没有吗？
此外，作为附带问题，为什么我不能在 .one.two< 中的 选择器？这似乎适用于 Chrome，但不适用于 here ..one 和 .two 之间留一个空格
Link to specificity calculations .
<!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.
Any idea why it doesn't?
您的ul是橙色。但是你的 li 是蓝色的，与其父级的颜色无关，因为你已经明确定位它并为其应用了颜色。如果您覆盖隐式 color: inherit，它将不会继承其父项的颜色。
why can't I have a space between the .one and the .two in the .one.two selector?
因为那是一个完全不同的选择器。 .one .two 匹配 .two inside .one。 .one.two(没有空格)匹配既是 .one 又是 .two 的元素。
<div class="one">
<div class="two"></div> /* matched by .one .two */
</div>
<div class="one two"></div> /* matched by .one.two */
关于html - 嵌套 CSS 选择器的特殊性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36426167/