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;
}

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

score 4 · Accepted Answer

您可以计算这些选择器的特异性（这里有一个更友好的版本）：

粗体数字只是特异性的以 10 为底的表示。您将无法始终以这种方式编写它们，这0,0,100,0也是一种有效的特异性，并且必须以高于 100 的基数表示。

所以回到你的问题：.menu > li> .two> ul > li，因为类选择器比标签名称（类型）选择器更具体。

1 回答 1