HTML：
<ul id="menu">
<li><a href="" class="active">Portfolio</a></li>
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Request a Quote</a></li>
</ul>
CSS：
ul#menu li {
display:inline;
margin-left:12px;
}
使用“ul#menu li”和只使用“#menu li”有区别吗？我使用了这两个版本，它们似乎完成了同样的事情。大多数教程使用在 id 前添加“ul”是有原因的吗？
【问题讨论】：
标签： html css css-selectors
有一个明显的区别和一个更细微的区别。
明显的区别在于#menu 以ID 为#menu 的所有元素为目标，而ul#menu 仅以ul 元素为目标。如果您只将 ID #menu 提供给 ul 元素，则选择器将始终具有相同的结果。
与一种叫做特异性的东西有一个潜在的区别。这是一种确定在发生冲突时使用哪个规则的方法。所以如果你有这两条规则：
#menu li {color: blue;}
ul#menu li {color: red;}
第二条规则将获胜，因为它更具体，并且文本将是红色的。特异性规则很复杂，并不总是直观的，但在这种情况下，简单的结果是ul#menu li 比#menu li 稍微更具体一些。如果您只有一个样式表，这对您来说不太可能成为问题。如果您有多个样式表，那么弄清楚为什么忽略某个规则可能会令人困惑；特异性往往是答案。
至于为什么大多数教程使用ul#menu，我不知道。 （事实上，我只有你的断言作为他们这样做的证据！）我猜他们是为了白痴读者而使事情变得非常明显。
【讨论】：
menu。 #menu ul li 表示 ul 元素内的 li 元素，该元素位于另一个 ID 为 menu 的元素内。
对于这些特定元素，呈现的结果不会有所不同。
但是，ul#menu li 更具体，因为它针对所有类型为 li 且父 ID 为 #menu 和类型为 ul 的元素。
#menu li 仅针对所有类型为 li 且父 ID 为 #menu 的元素。
在大多数情况下，它们会做完全相同的事情。 #menu li 不应该对页面上的其他元素产生任何影响，因为 id 是特定的，因此，正如下面的 cmets 中所建议的，它是不必要的。因此，我会坚持#menu li。
【讨论】：
区别在于特异性。 ul#menu 更具体，它认为规则所针对的元素必须是具有菜单 ID 的 <ul>。假设您将 <ul> 更改为具有菜单 ID 的 <div> 它将不起作用（不更改您的 css）。此外，如果您仅使用#menu 定义某些内容，则可以通过使用ul#menu 使规则更具体来添加覆盖。你可以在这里阅读更多内容：battle-of-the-selectors-specificity。
【讨论】：
两者之间的特异性差异通常不会产生影响，但我们可以考虑在哪些情况下会产生影响。
如果您在一个页面上有<div id="menu"></div>，在另一个页面上有<ul id="menu"></ul>，并且您在两者中使用相同的CSS 文件怎么办？我并不是说这将是一个好的设计决策，但在这种情况下，ul#menu 和#menu 之间的区别将很重要。您希望 CSS 应用于所有带有 id="menu" 的元素还是仅适用于带有 id="menu" 的 ul 元素？这就是区别。
【讨论】：
我想给出与@jacktheripper 相同的答案，但想添加以下内容：
是的，ul#menu li 更具体，但它也需要更多的解析时间，因为 CSS 从右到左读取选择器。因此，它会挑选出所有元素 #menu，然后收集所有 UL-lists 并从中选择包含先前找到的 #menu 的元素。
这在使用长链选择器时会产生更大的不同：#mainmenu ul.menu li.current ul li.current（而不是 #mainmenu .current .current）。
【讨论】：