4

在这个例子中：

http://jsfiddle.net/Ja29K/

<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

element (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 选择器基本上必须是最具体的东西，就像内联样式一样。

PS：对不起我的英语不好:)

4

6 回答 6

4

不，根据选择器的逻辑，它不是。

#header a比 更具体#login。如果您将#header a选择器缩减为#header，则标题选择器和登录选择器将具有相同的特异性，并且将使用最后表达的规则（按照您的顺序从登录中获取颜色）。如果您通过向其添加标签名称来增加登录选择器的具体性，情况也是如此。

于 2012-08-20T21:06:22.003 回答
1

您似乎熟悉特异性的概念，它在 w3 css specs 中得到了详尽的描述。从算法的角度来看，规则声明中的选择器特异性值是 flat-weighted 或non-positional。这意味着#header a和a#login具有相同的特异性，这意味着如果一个元素符合这两个规则，则后一个将优先。

就个人而言，我花了更长的时间来接受具有语义特异性但没有计算价值的选择器。例如，即使后者“感觉”更具体，但具有相同的权重ul li！ul>li

我发现任何具有函数式编程背景的人都发现将特异性比较为四字节值更容易（这实际上接近于它在主要浏览器中的实现方式 -因此在使用 256 个以上相同权重的选择器时会溢出值:)

于 2012-08-20T23:17:38.867 回答
1

从哪个选择器针对最少元素的意义上看，您看不到“特异性”，而只是最重要的。

当然，通过区分诸如#header a或之类的东西，规则是否可以变得更加复杂a#login。然而，这只会给整个系统增加更多的混乱。
也很可能这个（c/w）会被如下滥用：header#header a- 这增加了更高的特异性，但也可以针对更多元素。

在我看来，这不会为系统增加更多价值，只会让它变得更加复杂。

在编写 CSS 时，应始终尝试使规则尽可能短，以解决性能问题。如果您需要覆盖规则，您仍然可以添加另一个规则，id或者class- 除了正常的级联之外，这确实绰绰有余。

于 2012-08-20T21:14:32.707 回答
0

解决这个问题所需要的只是改变#login让a#loginDOM 知道这个命令是特定于链接的。

更具体的#header a不仅仅是#login因为它指向 DOM 中的特定元素，而不仅仅是随机 id。

于 2012-08-20T21:27:30.743 回答
0

这取决于特异性 - 更具体，它将为您工作：

header a#login {
 color: #00F; /* Blue */
}​
于 2012-08-20T21:00:20.303 回答
0

OP，也许您可​​以认为 CSS 首先处理第一个参数（#header 和 #login），然后才处理第二个参数（“#header a”中的 a）。

所以在第一个过程中，它变成红色，然后是蓝色，但在第二个过程中，由于第二个参数中的“a”，它被覆盖为红色。

于 2012-08-20T21:14:07.853 回答