html - ul#menu vs #menu？

Question

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”的原因是什么？

Answer 1

有一个明显的区别和一个更细微的区别。

明显的区别是 #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，我不知道。 (事实上​​ ，我只有你的断言作为他们这样做的证据!)我的猜测是他们为了白痴读者而使事情变得非常明显。