为什么 # 选择器的特异性比任何选择器都低？

Question

大粗体大写锁定 TL;DR：

我知道如何确定选择器特异性，我认为它使用了有缺陷的假设，并且我可以用有效的集合理论关系来支持我的愤怒，请不要回应解释 W3 特异性计算规则，请阅读问题 <- 阅读该问题。

当我为某些 HTML 编写类似于下面的样式时，这困扰了我一段时间：

...
<div id="outer">
    <span id="inner"></span>
    <span></span>
    ...
</div>
...

为什么特异性规则使选择器“#outer span”比“#inner”更具体？ ID 是唯一的，所以当我说“#inner”时，我只能指一个元素，那么为什么它不那么具体呢？我理解确定特异性的规则，我只是想知道这是有意还是无意，还有是否有人知道我如何向编写 css 标准的人提出这个问题。

我应该注意，我确实明白我可以使用 #outer #inner 来确保最大的特异性，但这似乎首先就违背了 ID 的目的。当我编写模板并且不确定一个 ID 是否位于另一个 ID 内时，这也是一个有问题的解决方案。我不是在寻找解决方法，只是寻找理论答案。

我的问题是理论，完全基于设定逻辑。我的想法是，如果您为 n 个可能项目中的 1 个项目定义规则，这不是您可以做到的最具体的吗？为什么 CSS 选择器的创建者会制定一个规则来定义 n 个可能项目中的 m 个项目，其中 m 是 n 的子集作为更具体的规则？

我的想法是，#id 相当于按名称识别 1 个项目，而 #id elm 将根据名称与项目的关系来识别组。调用一个命名项不如具有命名关系的未命名组具体，这是完全违反直觉的。

Answer 1

如何

计算特异性的 W3C 规则：

• 如果声明来自“style”属性而不是
  使用选择器规则，否则为 0 (=
  a) （在 HTML 中，元素的值
  “style”属性是样式表
  规则。这些规则没有选择器，
  所以 a=1、b=0、c=0 和 d=0。）
• 计算选择器中 ID 属性的数量 (= b)
• 计算其他属性和伪类的数量
  选择器 (= c)
• 计算选择器中元素名称和伪元素的数量（=
  d)

特异性仅基于
选择器的形式。特别是，一个
“[id=p33]”形式的选择器是
算作属性选择器（a=0，
b=0, c=1, d=0)，即使 id
属性被定义为“ID”
源文档的 DTD。

连接四个数字 abcd
（在基数较大的数字系统中）
给出了特异性。
此外，当规则具有相同的特殊性时，最后一个获胜。

示例

• 外跨度：a=0, b=1, c=0, d=1 --> 101

• span#inner: a=0, b=1, c=0, d=1 --> 101
• div#outer span#inner: a=0, b=2, c=0, d=2 --> 202

尝试重新排列规则 1 和 3：http://jsfiddle.net/Wz96w/

为什么< /strong>

我的想法是 #inner 没有指定唯一的元素。虽然每页只有 1 个元素，但该 ID 可能是另一页上完全不同的元素。

一页：

<div id="outer">
  <div id="inner"> ... </div>
</div>

另一页：

<ul id="outer">
  <li>main1
    <ul id="inner">
      <li>sub1</li>
      <li>sub2</li>
    </ul>
  </li>
  <li>main2</li>
</ul>

虽然，我不会这样编码。我认为它解释了为什么添加元素（ul#outer 与 #outer）值得额外的特殊性。

对于后代这一点，我正在可视化标记的 DOM。规则#outer span的路径长度比#inner的路径长度长。因此，在这种情况下，它指定了一个更具体的子树，因此应该授予它更多的特异性（并且 #outer #inner li 应该 [is] 比 #inner li 更有价值代码>）。

Answer 2

对我来说，我完全基于观点，这是预期的“自然”行为。

考虑一下：

您知道 CSS 特异性是如何计算的，从该公式我们知道 #outer span 比 #outer 更具体，这对于 CSS 整体来说是必要的才能正确工作，而且这是有道理的。 #outer span 也比 #inner 更具体，这在样式表的域内也是符合逻辑的（#inner 只是一个 ID， #outer span 是一个 ID 加一个元素，因此如果我们只是查看样式表，为了对它们进行排名，更合格的必须更具体）。

这里发生的情况是，您应用了 HTML 标记的上下文，并说“嗯，这没有意义”。为了使事情按照您期望的方式工作，浏览器必须考虑以下事项：

• 此 位于
• #outer span 和 #inner 应用的样式表规则 #outer span
• 比 #outer span 更具体代码>#inner
• 但是等等！ 位于
  内部，因此忽略基于样式表的计算并声明 #inner 更具体

最后一步使得确定过程完全基于 HTML 的结构，这使得无法仅根据 CSS 来定义特殊性。我个人认为这会使整个过程更加复杂且难以定义，但你可能不同意。

Answer 3

因为#outer span既有ID选择器又有元素选择器。该元素选择器使它比 #inner 更重。

前者的意思是“选择在 ID outer 的任何元素中找到的任何元素”。
后者意味着“选择 ID 为 inner 的任何元素”。它不知道 #inner 在 HTML 文档中的位置，因此特异性较低。

也许您可以尝试#outer #inner或span#inner尝试#outer span#inner。

Answer 4

我认为“为什么”的想法更多的是“世代”或“权威”的观点。如果#Parent（任何一代人）说我所有符合条件“x”的孩子（在您的例子中，span）将获得“y”的继承权"（无论什么 css 属性），单个 #Child 想要什么并不重要，如果父级已声明，它需要 #Parent 的权限才能获取它否则。

编辑时添加：内联样式将成为叛逆的孩子，而!important将成为镇压的父母。 编辑：我保留这个是为了幽默，但我不认为它反映了这个想法以及我后来在下面的陈述。

在评论中添加对问题的编辑：给出：

#outer span ...
#inner (which is a span element)

然后为了帮助确保#inner选择，我建议：

body span#inner (*edit:* just span#inner works *edit:* if defined later)

或者给body一个id，

#bodyId #inner

当然，这些仍然可以被覆盖。涉及的“代际”越多，由于代际共识，改变行为就越困难（如果曾祖父、祖父和父母都同意，孩子很可能不会做自己的事情） 。

我必须在以后的编辑中主要重写这一部分
鉴于此 HTML：

<div id="grandparent">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>

我之前曾说过“#parent div 比 #grandparent div 具有更大的权限。两者都具有代际权限，事实上，是“平等”的代际权限，但第一个是“近一代”获胜。 其中的错误是，世代“更接近”并不重要，重要的是最后被授予权力。在同等权力的情况下，最后指定的人获胜。

我相信我仍然可以坚持这样的说法：考虑到这一点，像 #child[id] 这样的选择器（它比之前的两个选择器都重要）将其属性视为获得更大权限的权限，以规则其本身控制的内容。 # 已经赋予了它权限，但不足以覆盖较早一代的 #（如果较早一代还带有另一个授予更多权限的选择器）。

因此，#grandparent div 超过 #child，但不是 div#child 如果它是最后一个获得授权的[添加此]，而不是 #child[id]，因为 [id] 为 #child 增加了更大的权力来统治自己。如果选择性相同，则最后一个被授予权限的人获胜。

同样，设置样式属性本身的 style 属性实际上更像是最高的授予权力来统治自己，假设更“!important”的东西不会剥夺它。

作为回答“为什么”是这样的总结陈述（并且不符合“集合”理论），我相信这与准确性甚至特异性无关（尽管这是使用的术语）事实上，人们会期望 #ChildsName 成为此事的最终唯一发言权，因为没有什么更具体的需要说明。然而，尽管文档可能没有这样说明，但“选择性”实际上是建立在授予权限的基础上的。权限。谁拥有最多的“权利”来统治该元素，并给予“平局”，谁是最后一个被授予这些权利的人。