html - CSS 选择器优先级

Question

我有以下 HTML:

<ul class="menu">
  <li>One</li>
  <li class="two">Two</li>
  <li>Three</li>
</ul>

和以下 CSS:

.menu > li {
  color: red;
}

.two {
  color: green;
}

但是所有列表项都是红色的。如果我将其更改为:

ul > li {
  color: red;
}

.two {
  color: green;
}

.two 类的第二个列表项现在有我想要的绿色。这是任何错误还是为什么它以这种方式工作？

http://codepen.io/Chovanec/pen/iJsuC

Answer 1

您可以 calculate the specificity这些选择器(这里是 friendlier version ):

• .menu > li 具有特异性 0,0,1,1 (11)。
• ul > li 具有特异性 0,0,0,2 (2)。
• .two 具有特异性 0,0,1,0 (10)。

粗体数字只是特性的以 10 为底的表示形式。您并不总是能够以这种方式编写它们，因为 0,0,100,0 也是一个有效的特异性并且必须以高于 100 的基数表示。

回到你的问题:.menu > li > .two > ul > li，因为类选择器比标签更具体名称(类型)选择器。