CSS specificity: [parent ID] [descendant combinator (space)] [my class] 比 [my ID] 更具体？

Question

我的推理有误吗？这是有效的 CSS 规则吗？

首先：

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

其次：

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

但是：

[parent ID] [后代组合子 (space)] [my class] 比 [my ID] 更具体?

See it for yourself - JS Bin.

这真的让我很惊讶，因为我以前从未听说过这种组合，在 Specificity Wars neither in https://www.w3.org/TR/selectors/#specificity

中没有

Answer 1

[My ID] is more specific than [parent ID]

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

[parent ID] [descendant combinator (space)] [my class] more specific than [my 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>

Answer 2

[My ID] is more specific than [parent ID].

否；它们同样具体。 ID 就是一个 ID，它总是具有相同的特异性。但如果两个 ID 匹配的是不同的元素，那么特异性就无关紧要了。

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

[parent ID] [descendant combinator (space)] [my class] more specific than [my ID]?

额外的 class 选择器使前者比后者更具体。

请注意，组合器对特异性没有影响。复合选择器 #id .class 带有后代组合器，同样特定于复合选择器 #id.class.

CSS specificity: [parent ID] [descendant combinator (space)] [my class] 比 [my ID] 更具体？

CSS specificity: [parent ID] [descendant combinator (space)] [my class] more specific than [my ID]?

css

css-selectors

css-specificity