css - CSS特殊性:[父ID] [后代组合符(空格)] [我的类]比[我的ID]更具体？

我的推理错了吗，这是有效的CSS规则吗？

首先:

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

其次:

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

但:

[父代ID] [后代组合器(空格)] [我的 class ]比[我的ID]更具体？

See it for yourself - JS Bin。

这真的让我感到惊讶，因为我以前从未听说过这种组合，在Specificity Wars和https://www.w3.org/TR/selectors/#specificity中都没有

最佳答案

不，一个孤独的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

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

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

关于css - CSS特殊性:[父ID] [后代组合符(空格)] [我的类]比[我的ID]更具体？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41119069/