CSS选择器:(菜单ul li）或（菜单li）

Question

哪个更好用

.menu{
    float:left;
    width:600px;
    height:25px;
    background:url(bg.png) repeat-x;

}
.menu ul{
    float:left;
}
.menu ul li{
    float:left;
    width:150px;
    height:25px;
    background:#F00;
}

要么

.menu{
    float:left;
    width:600px;
    height:25px;
    background:url(bg.png) repeat-x;

}
.menu ul{
    float:left;
}
.menu li{
    float:left;
    width:150px;
    height:25px;
    background:#F00;
}

哪个标签是正确的menu ul li或menu li ？

Answer 1

当你说which tag is right menu ul li or menu li? ，你在谈论一个带有class="menu"的div，或者你在谈论已弃用的菜单标签 （ <menu> ）？

如果你只是在谈论你的css代码，那些不是标签，它们是选择器。 我会选择最具体的选择器，以避免意外分配

.menu > ul > li{
    // this matches only list items directly inside a ul directly inside a .menu
}

更好的是这样的：

#menu > ul > li{
    // now you are referencing the menu by id, so you know this is a unique assignment
}

或者，如果您有多个菜单：

#menubar > .menu > ul > li{
}

因为否则你会有惊喜，你可能实际上有这样的结构:(这很难看，我知道，但只是为了证明一点）

<div class="menu">
    <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3
        <ul>
            <li id="abc">Menu Item abc</li>
        </ul>
        </li>
        <li>Menu Item 4
        <div><div><div><ol><li><div><ul>
                <li id="xyz">Menu Item xyz</li>
        </ul></div></li></ol></div></div></div>
        </li>
    </ul>
</div>

（你可能不想匹配abc或xyz项）。

Answer 2

在您必须与同一样式表中的其他类似选择器进行交互之前，它没有任何区别 - 然后它取决于这些选择器是什么。

Answer 3

这取决于。 如果你在.menu有一个ol和一个ul ，你会想要使用更具体的.menu ul li 。 否则， .menu li很好。 您可能希望了解CSS特性 。

Answer 4

除非您还要在.menu容器中订购列表（ <ol> ）， 否则结果完全相同。 有些人可能会说一个比另一个更快，但这是无关紧要的（很难证明，因为它可能在每个浏览器中都有所不同）

Answer 5

您的选择器应该与您的意图相匹配 - 如果您的意思是任何列表项，无论它是在UL或OL中的样式是否相同，那么示例B.如果它只是UL LI的样式，那么A.

这是一个相当简单的例子，但这是一个有用的经验法则。 问问自己“如果有人来到并且列出了一个有序列表.menu，我怎么想让它看起来？

这是一种很好的方法，可以使CSS保持恰当的特异性，同时保持其可应用的HTML结构的灵活性。

Answer 6

Mozilla Devcenter建议使用.menu li 。 您可以更多地了解编写高效CSS和优化CSS代码。 就个人而言，我使用<ul id='menu'>然后#menu { display: block; margin: 0; padding: 0 } #menu { display: block; margin: 0; padding: 0 } #menu { display: block; margin: 0; padding: 0 } 。