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还是在谈论deprecated menu tag（<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

这取决于。如果您在ol内有ul和.menu，则需要使用更具体的.menu ul li。否则，.menu li没问题。您可能希望read up on CSS specifity。

Answer 4

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

Answer 5

你的选择器应该匹配你的意图 - 如果你的意思是任何列表项，无论它是在UL或OL里面的样式是否相同，那么例子B.如果它只是UL LI你的想要风格，然后A。

这是一个相当简单的例子，但这是一个有用的经验法则。问问自己“如果有人来到并将一个有序列表粘贴在.menu中，我怎么能让它看起来？”

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

Answer 6

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

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

6 个答案: