CSS特异性：[父ID] [后代组合（空间）] [我的班级]比[我的ID]更具体？

Question

我的推理是错误的，这是一个有效的CSS规则吗？

首先：

1. [我的ID]比[我的班级]更具体。

其次：

1. [我的ID]比[父ID]更具体。

可是：

1. [家长ID] [后代组合（空格）] [我的班级]比[我的ID]更具体？

See it for yourself - JS Bin

这真让我感到惊讶，因为我以前从未听说过这种组合，而不是Specificity Wars

中的https://www.w3.org/TR/selectors/#specificity

Answer 1

  

[我的ID]比[父ID]

更具体

不，单独的ID是唯一的ID。在您的示例中，重要的是它应用于哪个元素。

  

[父母身份证] [后代组合者（空间）] [我的班级]比[我的身份证]更具体

是的，它有效，而且更具体。使用W3C's abc 模型：

#child { // 1, 0, 0 = 100 Specificity }

#parent .foo { // 1, 1, 0 = 110 Specificity }

#parent #child { // 2, 0, 0 = 200 Specificity }

#parent #child.foo { // 2, 1, 0 = 210 Specificity }

因此，#parent .foo将胜过#child，但#parent #child胜过#parent .foo

＆＃13;

＆＃13;

#parent { /* 100 */
  color: blue;
}
#parent .foo { /* 110 */
  color: green;
}
#child { /* 100 */
  color: red;
}
#parent #child { /* 200 */
  color: aqua;
}

＆＃13;

<div id="parent">
  <div id="child" class="foo bar">what color am I?</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

[我的ID]比[父ID]更具体。

没有;他们同样具体。 ID是ID，它将始终具有相同的特异性。但如果这两个ID匹配不同的元素，那么特异性首先是无关紧要的。

请记住，仅当您有两个或更多匹配相同元素的选择器时，才适用特异性。

  

[家长ID] [后代组合（空格）] [我的班级]比[我的ID]更具体？

附加的类选择器使前者比后者更具体。

请注意，组合子对特异性没有影响。具有后代组合子的复杂选择器#id .class与复合选择器#id.class具有同等的特异性。