Question

给出以下类声明和代码......

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 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

Answer 2

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

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

然后颜色会变红。如果您的规则是：

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

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

Answer 3

组合器在特异性方面没有任何价值，只有选择器具有：id，class，tags，伪元素，伪类，属性选择器。

CSS直接后代（＆gt;）在选择性上没有任何价值吗？

3 个答案: