html - css 选择器在没有它的类的情况下无法工作

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 specificity 的回答，#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 更具体？ (这个不需要演示，因为 top first demo 显示了这个)

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

根据您的需要。

---

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