Question

HTML：

<div id="header">
    <div id="one">
        <ul class="menu">
            <li>one text</li>
        </ul>
    </div>
    <div id="two">
        <ul class="menu">
            <li>one text</li>
        </ul>
    </div>
</div>

这个css不起作用

#header ul.menu{
    background-color: red;
    text-align: left;
}
#two ul{                     /*this line*/
    background-color: blue;
    text-align: right;
}

这个css工作

#header ul.menu{
    background-color: red;
    text-align: left;
}
#two ul.menu{                /*this line*/
    background-color: blue;
    text-align: right;
}

demo

为什么会这样？

更新

根据css特异性#header ul.menu的答案，比#two ul更具体。我仔细检查了ul.menu比ul更具体。

ul.menu{...}
#two ul{...} /* works exactly, yes #two is more specific than ul.menu */

好的，改变订单

订单1：

#header ul.menu{
    background-color: red;
    text-align: left;
}
#two ul.menu{                   /* this selector works as per the specificity */
    background-color: blue;
    text-align: right;
}

为什么#two ul.menu比#header ul.menu更具体？（演示不需要演示，因为最高的第一个演示显示了这一点）

订单2：

#two ul.menu{
    background-color: blue;
    text-align: right;
}
#header ul.menu{                /* this selector works as per the specificity */
    background-color: red;
    text-align: left;
}

为什么#header ul.menu比#two ul.menu更具体？ demo

Answer 1

这是因为#header ul.menu中的类选择器使其比#two ul更具体，即使#two在结构方面“更接近”ul。特异性并不关心一个元素与另一个元素的“接近”程度。它甚至不计算组合子，所以即使你使用了#two > ul它也没有什么区别。

如果您要选择相同的元素，则没有理由不平衡您的选择器的特异性，并将类选择器保留在两个规则中：

#header ul.menu{
    background-color: red;
    text-align: left;
}
#two ul.menu{
    background-color: blue;
    text-align: right;
}

或者从两条规则中删除它：

#header ul{
    background-color: red;
    text-align: left;
}
#two ul{
    background-color: blue;
    text-align: right;
}

视您的需要而定。

在您的更新中，您只需切换两个同样具体的规则。后面的规则总是覆盖先前的规则。同样，这与元素结构无关。

Answer 2

那是因为第一个选择器：

#header ul.menu

是比以下更具体的匹配：

#two ul

因为它包含一个类选择器和一个类型选择器，因此将被使用顶部选择器应用的样式覆盖。

Answer 3

那是因为你有更“特定”的行#header ul.menu所以它使用这些样式。使用#one ul代替#header ul或使用#two ul.menu

Answer 4

#header ul.menu为ul.menu下方的DOM树中的所有#header项设置背景颜色。因此，与#header ul或#two ul

相比，它具有更高的css权重

看看css中的级联实际如何工作以及如何应用称重。

您也可以在没有任何ul的情况下投放，只需使用#id .class即可。

#header .menu{
    background-color: red;
    text-align: left;
}
#two .menu{
    background-color: blue;
    text-align: right;
}

Answer 5

为什么#header ul.menu比#two ul.menu更具体？

选择器具有 相同的 特异性。发生这种情况时，最后宣布的那个获胜。

最后，按指定顺序排序：如果两个声明具有相同的顺序重量，起源和特异性，后者指定获胜。导入样式表中的声明被认为是在任何声明之前样式表本身的声明。

来源：http://www.w3.org/TR/CSS2/cascade.html#cascading-order

Answer 6

你应该提到完整的层次结构，例如#header div ul.menu

以下内容可行：

#header div ul.menu{
    background-color: red;
    text-align: left;
}

然后，如果您希望header内的特定div具有不同的css样式，请将div替换为该特定div的id或唯一类。

#header #two ul.menu{
    //some styles just for menu inside #two
}

小提琴：http://jsfiddle.net/M5pLZ/3/

干杯

没有它的类，css选择器不工作

6 个答案: