<style>
/* Default links */
a {
color: #0F0; /* Green */
}
/* Header links */
#header a {
color: #F00; /* Red */
}
/* Login link */
#login {
color: #00F; /* Blue */
}
</style>
<header id="header">
<p><a href="#">header link</a> is red</p>
<p><a id="login" href="#">login link</a> is not blue</p>
</header>
我知道声明具有相同的起源和相同的重要性，因此需要对它们进行评分（选择器的特异性）。
为计算选择器特异性，我为每个选择器创建了一个表：
A =内联样式的数量：0
B = ID数：0
C =班级数：0
D =元素数量：0
所以登录元素有3次与他的颜色相关的碰撞： a ， #header a ， #login
元素（A，B，C，D）
a （0,0,0,1）= 1
#header a （0,1,0,1）= 101
#login （0,1,0,0）= 100
选择器“#header a”获胜，因为它得分最高。
如果我们将选择器“#login”更改为“a＃login”，我们将具有：
a＃login（0,1,0,1）= 101
选择器“#header a”丢失，因为绘制赢得了声明的最后一个。
由于“#header a”选择器引用了许多元素而ID选择器（例如#login）只引用了一个元素，我们想要将ID选择器声明应用于该元素是对的，对吧？我真的无法理解这个CSS优先级逻辑，因为我认为ID选择器必须基本上是最具体的东西，就像内联样式一样。
P.S。：对不起我的英语不好：）
答案 0 :(得分：4)
不，根据选择者的逻辑，它不是。
#header a比#login更具体。如果您将#header a选择器缩减为#header，则标题选择器和登录选择器将具有相同的特异性，并且将使用上次表达的规则（按您的顺序从登录中获取颜色） 。如果通过向其添加标记名称来增加登录选择器的特定性，情况也是如此。
答案 1 :(得分：1)
从哪个选择器定位最少的元素，而不仅仅是最重要的元素，您无法看到“特异性”。
当然，通过区分诸如#header a或a#login之类的内容，规则会变得更加复杂。然而，这只会给整个系统增加更多的困惑
此外（c / w）最有可能被滥用如下：header#header a - 这增加了更高的特异性，但也可以针对更多元素。
在我看来，这不会给系统带来更多的价值，只会让它变得更复杂。
编写CSS时，应始终尽量保持规则尽可能短的性能问题。如果您需要覆盖规则，您仍然可以添加另一个id或class - 除了正常的级联之外，这实际上已经绰绰有余了。
答案 2 :(得分：1)
您似乎熟悉特异性的概念，即thouroughly described as part of w3 css specs。从algorythm的角度来看，规则声明中的选择器特异性值是平面加权的或非位置。这意味着#header a和a#login具有相同的特异性，这意味着如果一个元素符合两个规则的条件，则后者优先。
就个人而言，与选择器达成协议需要花费更长的时间，因为选择器具有语义特异性但没有计算价值。例如，ul li和ul>li具有相同的权重，即使后者“感觉”更具体！
我发现任何具有函数式编程背景的人都会更容易将特异性比较为四字节值（这实际上与主要浏览器中的实现方式相近 - consequently overflowing the value when 256+ selectors of the same weight are used：）
答案 3 :(得分：0)
它只是针对特异性 - 更具体，它会对你有用：
header a#login {
color: #00F; /* Blue */
}
答案 4 :(得分：0)
所以在第一个过程中，它变为红色，然后变为蓝色，但在第二个过程中，由于第二个参数中的“a”，它被覆盖为红色。
答案 5 :(得分：0)
修复此问题只需将#login更改为a#login，让DOM知道此命令特定于链接。
#header a比#login更具体，因为它指向DOM中的特定元素，而不仅仅是随机ID。