CSS 直接后代 (>) 在选择性方面没有任何价值吗？答案

【问题标题】：Does the CSS direct decendant (>) not have any value in selectivity?CSS 直接后代 (>) 在选择性方面没有任何价值吗？
【发布时间】：2014-11-29 14:24:26
【问题描述】：

鉴于以下类声明和代码...

.foo > a { color:green; }
.bar a { color:red; }

<div class="bar">
    <div class="foo">
        <a href="#">SOME LINK</a>
    </div>
</div>

...我认为链接会是绿色的，因为虽然两个声明都有一个类（010）和一个元素（001），但.foo 有直接后代选择器。但是，唉，链接是红色的。 为什么？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

> 对于 css 特异性没有任何价值。

这两种情况都有 11 个特异性值：

.foo > a { color:green; }/*specificity value is 11*/
.bar a { color:red; }/*specificity value is 11*/

在您的情况下，您可以像这样使用以获得更大的特异性：

.bar .foo > a { color:green; }/*greater specificity value is 21*/
.foo a { color:red; }/*specificity value is 11*/

好的，我将在这里添加特异性的工作原理：

Selector                          Specificity         Specificity in large base
inline-style                      1 0 0 0             1000
id selector                       0 1 0 0              100
class,pseudo,attribute selector   0 0 1 0               10
type selector and pseudo elements 0 0 0 1                1

【讨论】：

它不是以 10 为基数的。它在一个任意大的基数中。例如，11 个类型选择器（或任意数量）的特异性仍然低于 1 个类选择器。
感谢 Bhojendra，到目前为止我的假设是 > 被视为伪元素，发现事实并非如此有点令人沮丧。您是否有任何参考说明为什么不这样做，为什么不以这种方式包含它没有多大意义？
是的，我现在明白了，但不清楚原因。 :first-child 是一个伪元素，那为什么> 不是呢？你知道为什么会这样吗？
@oucil：问得好。这是因为子组合器和后代组合器是相同的。子组合器也可以称为直接后代组合器。子组合器只是后代组合器的一种。例如对于 ab - p span 与 p > span 相同。所以，做一个优先级是矛盾的。此外，如果有嵌套元素，即使这样，孩子也是后代。因此 CSS 规范没有组合优先级的概念，在这种情况下依赖于顺序。
@oucil：顺便说一下，:first-child 是一个伪类，而不是一个伪元素。具体来说，伪类与类选择器分组，伪元素与类型选择器分组。所以重要的是不要把两者混为一谈。

【解决方案2】：

您有两个相互冲突的 CSS 规则。如果我没记错的话，直接后代选择器与后代选择器具有相同的特异性，因此稍后解析的规则将覆盖以前解析的规则，所以如果您的规则是：

.foo > a { color:green; }
.bar a { color:red; }

然后颜色将为红色。如果您的规则是：

.bar a { color:red; }
.foo > a { color:green; }

那么对于满足这两个规则的选择器的任何锚点，颜色将为绿色。

【讨论】：

【解决方案3】：

组合子在特异性上没有任何价值，只有选择器有 :id、class、tags、伪元素、伪类、属性选择器。

【讨论】：