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”？
答案 0 :(得分：12)
有一个明显的区别和一个微妙的区别。
明显不同的是#menu定位标识为#menu的所有元素，而ul#menu仅定位ul元素。如果您只将ID #menu提供给ul元素，则选择器将始终具有相同的结果。
特殊情况存在一个潜在的差异。这是一种确定在发生冲突时使用哪个规则的方法。所以，如果你有这两个规则：
#menu li {color: blue;}
ul#menu li {color: red;}
第二条规则将获胜，因为它更具体，文字将为红色。特异性规则很复杂，并不总是直观，但在这种情况下，简单的结果是ul#menu li稍微比#menu li更具体。如果您只有一个样式表，这对您来说不太可能是个问题。如果你有几个样式表，可能会弄清楚为什么忽略某个规则;特异性往往是答案。
至于大多数教程使用ul#menu的原因，我不知道。 （事实上，我只有你的断言作为他们所做的证据！）我的猜测是他们为了愚蠢的读者而制造的东西真的非常明显。
答案 1 :(得分：3)
对于这些特定元素，呈现的结果不会有所不同。
但是，ul#menu li更具体，因为它定位了父级为li且类型为#menu的{{1}}类型的所有元素。
ul仅定位父级为#menu li的{{1}}类型的所有元素。
在大多数情况下，他们会做同样的事情。 li不应对页面上的其他元素产生任何影响，因为id是特定的，因此，正如下面的注释中所建议的那样，它是不必要的。因此，我会坚持#menu。
答案 2 :(得分：2)
区别在于特异性。 ul#menu更具体，并认为规则所定位的元素必须是具有id菜单的<ul>。假设您将<ul>更改为具有ID菜单的<div>，它将无效（不更改您的CSS）。此外，如果您使用#menu定义某些内容，则可以通过使用ul#menu使规则更具体来添加替换。您可以在此处阅读更多内容：battle-of-the-selectors-specificity。
答案 3 :(得分：0)
两者之间的特异性差异通常不会产生影响，但我们可以考虑它的具体情况。
如果您在一个页面上有<div id="menu"></div>而在另一个页面上有<ul id="menu"></ul>，并且您在两个页面中都使用相同的CSS文件，该怎么办？我不是说这是一个很好的设计决定，但在这种情况下，ul#menu和#menu之间的区别很重要。您是否希望CSS应用于id="menu"的所有元素或ul的{{1}}个元素？这就是区别。
答案 4 :(得分：0)
我想给出与@jacktheripper相同的答案，但想添加以下内容：
是的，ul#menu li更具体，但它还需要更多的解析时间，因为CSS从右到左读取选择器。因此，它会选出所有元素#menu，然后收集所有UL - 列表，然后从中选择包含之前找到的#menu的列表。
使用长链选择器时会产生更大的差异：#mainmenu ul.menu li.current ul li.current（而不是#mainmenu .current .current）。