2

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;
}

演示

为什么会这样？

更新

根据关于 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？演示

4

6 回答 6

6

这是因为类选择器 in#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;
}

取决于你的需要。

在您的更新中，您只是简单地切换了两个同样特定的规则。后面的规则总是覆盖前面的规则。同样，这与元素结构无关。

于 2013-08-28T09:27:17.773 回答
3

那是因为第一个选择器：

#header ul.menu

是比以下更具体的匹配：

#two ul

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

于 2013-08-28T09:27:24.913 回答
2

那是因为你有#header ul.menu更“具体”的行，所以它使用这些样式。要么使用#one ul，#header ul要么使用#two ul.menu

于 2013-08-28T09:27:34.057 回答
0

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

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

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

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

于 2013-08-29T04:33:09.770 回答
0

#header ul.menuul.menu为DOM 树下的所有项目设置背景颜色#header。所以它具有更高的 CSS 权重，而不是#header ulor#two ul

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

您也可以在没有任何内容的情况下运行ul，只需使用#id .class它就可以了。

#header .menu{
    background-color: red;
    text-align: left;
}
#two .menu{
    background-color: blue;
    text-align: right;
}
于 2013-08-28T09:31:55.493 回答
-1

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

以下将起作用：

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

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

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

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

干杯

于 2013-08-28T09:29:41.253 回答