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？

- Kali Charan Rajput

Answer 1

当你说“哪个标签是正确的菜单ul li还是menu li？”时，你是在谈论一个带有class="menu"的div还是已弃用的菜单标签（）？

如果你只是谈论你的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。

- Sean Patrick Floyd

---

我也想评论嵌套列表。在我看来，这绝对是最好的方法。 - theorise

只是一条注释。*<menu>* 不再被弃用。它已经在 HTML5 中复活了。 :) - anon271334

@J.T.S. 很好知道，但在我写这篇文章之前我从未听说过它（我只是自己谷歌了一下 :-)) - Sean Patrick Floyd

是的，我之前也从未听说过 *<menu>*，直到我开始阅读有关HTML5的内容 :) - anon271334

我认为在所有浏览器中都不支持.menu > ul > li选择器，包括桌面和移动设备。 - Jitendra Vyas

Answer 2

在单独使用时没有什么区别，直到您需要与同一样式表中的其他类似选择器交互 - 然后这取决于这些选择器是什么。

- Quentin

---

我不太明白这个答案想要表达什么。你能否请再解释一下？ - Ben Hull

Answer 3

这要看情况。如果你在.menu中有一个ol和ul，那么你需要使用更具体的.menu ul li。否则，.menu li就可以了。你可能想要学习一下CSS特异性。

- Olly Hodgson

Answer 4

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

- Philippe Leybaert

Answer 5

你的选择器应该匹配你的意图 - 如果你想让任何列表项都被样式化，无论它是否在UL或OL中，那么就使用示例B。如果你只想样式化UL LI，那么就使用示例A。

这是一个相当简单的例子，但这是一个有用的经验法则。问问自己：“如果有人把一个有序列表放在.menu里面，我希望它看起来怎样？”

这是一种保持CSS特定性水平恰到好处、同时保持HTML结构灵活性的好方法。

- Ben Hull

Answer 6

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

- vtambourine