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课程的

secong列表项目现在已经是绿色了。这是任何错误或为什么这样工作？

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＆gt; .two＆gt; ul > li，因为类选择器比标记名称（类型）选择器更具体。