Question

大胆大胆锁定TL; DR：

我知道选择器的具体情况如何确定，我认为它使用了豁免的假设，我可以用有效的理论关系来支持我的不满，请不要回复解释W3计算规则的具体情况，请仔细阅读问题＆lt; - 读那个。

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

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

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

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

我的问题是理论，完全基于集合逻辑。虽然我有，如果你为n个可能的项目中的1项定义一个规则，那么具体到你能去的那个吗？为什么CSS选择器的创建者制定了一个规则，可以定义n个可能项目的m个项目，其中m是n的子集作为更具体的规则？

我的想法是#id将等同于按名称识别1个项目，而#id elm将根据名称与项目的关系来识别组。调用命名项比具有命名关系的未命名组更具特异性是完全违反直觉的。

Answer 1

我认为“为什么”的想法更像是“代际”或“权威”观点。如果#Parent（任何一代的回复）说我的所有符合资格“x”（在你的情况下，span）的孩子将被给予继承“y”（无论css属性），单个个体#Child想要什么并不重要，如果父母另有说明，它需要#Parent的权限来获取它。

在编辑时添加：内联style将成为反叛的孩子，而!important则是严厉的父母。 编辑：我认为这是为了幽默，但我不认为它反映了这个想法以及我后面的陈述。

在评论中添加编辑问题：鉴于：

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

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

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

或给身体一个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”并未将其删除。

作为回答“为什么”这样的方式的总结陈述（并且不符合“集合”理论），我认为它不是关于准确性或者甚至特异性< / em>（虽然这是使用的术语）确实然后人们会期望#ChildsName成为该问题的最终独特发言权，因为没有更具体的需要说明。相反，虽然文档可能没有这样说，但“选择性”实际上是在授予权限的基础上构建的。谁拥有最“权利”来统治这一要素，并给予“领带”，谁是最后一个获得这些权利的人。

Answer 2

因为#outer span同时具有ID选择器和元素选择器。该元素选择器使其权重超过#inner。

前者表示在 ID outer'的任何元素中找到'select 任何元素。
后者意味着'select ID为inner'的任何元素。它不知道HTML文档中#inner的位置，因此特异性较低。

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

Answer 3

如何

W3C rules for calculating specificity：

如果声明来自的是

为什么＃选择器的特异性比什么都小？

4 个答案: