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

Question

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

首先：

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

第二：

2. [我的 ID] 比 [家长 ID] 更具体。

但：

3. [父 ID] [后代组合符（空格）] [我的班级] 比 [我的 ID] 更具体？

亲自看看 - JS Bin。

这真的让我感到惊讶，因为我以前从未听说过这种组合，既没有在特异性战争中听说过，也没有在https://www.w3.org/TR/selectors/#specificity中听说过。

Answer 1

[我的 ID] 比 [家长 ID] 更具体

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

[父 ID] [后代组合符（空格）] [我的班级] 比 [我的 ID] 更具体

是的，它是有效的，而且更具体。使用W3C 的 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

#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 { /* 100 */
  color: blue;
}
#parent .foo { /* 110 */
  color: green;
}
#child { /* 100 */
  color: red;
}
#parent #child { /* 200 */
  color: aqua;
}