3

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”是否有原因？

4

5 回答 5

12

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

明显的区别是#menu针对具有 ID 的所有元素#menu，而ul#menu仅针对ul元素。如果只#menu为ul元素提供 ID，则选择器将始终具有相同的结果。

与称为特异性的东西有一个潜在的差异。这是一种确定在发生冲突时使用哪个规则的方法。所以如果你有这两个规则：

#menu li {color: blue;}
ul#menu li {color: red;}

第二条规则将获胜，因为它更具体，并且文本将是红色的。特异性规则很复杂，并不总是直观的，但在这种情况下，简单的结果是ul#menu li比#menu li. 如果您只有一个样式表，这对您来说不太可能成为问题。如果您有多个样式表，那么弄清楚为什么忽略某个规则可能会令人困惑；特异性往往是答案。

至于为什么大多数教程使用ul#menu，我不知道。（事实上​​，我只有你的断言作为他们这样做的证据！）我的猜测是，为了白痴读者，他们正在使事情变得非常明显。

于 2012-05-18T17:32:22.490 回答
3

对于这些特定元素，呈现的结果不会有所不同。

但是，ul#menu li更具体，因为它针对li具有父 id#menu和 type的所有类型元素ul。

  • 想象一下像 UL > #MENU > LI 这样的选择器

#menu lili仅针对具有父 id类型的所有元素#menu。

  • 想象一下像 #MENU > LI 这样的选择器

对于大多数目的，他们会做完全相同的事情。#menu li不应对页面上的其他元素产生任何影响，因为 id 是特定的，因此，正如下面评论中所建议的，它是不必要的。因此，我会坚持#menu li.

于 2012-05-18T17:28:03.493 回答
2

区别在于特异性。更具体ul#menu，并认为规则所针对的元素必须是<ul>具有菜单 ID 的元素。假设您将您的更改<ul>为<div>具有菜单 ID 的菜单，它不起作用（不更改您的 css）。此外，如果您使用 just 定义某些内容，#menu则可以通过使用 使规则更具体来添加覆盖ul#menu。您可以在此处阅读更多信息：选择器特异性之战。

于 2012-05-18T17:31:53.273 回答
0

两者之间的特异性差异通常不会产生影响，但我们可以想到会产生影响的情况。

如果您<div id="menu"></div>在一个页面和<ul id="menu"></ul>另一个页面上都有，并且您在两者中使用相同的 CSS 文件怎么办？我并不是说这将是一个好的设计决策，但在这种情况下，ul#menu和之间的区别#menu很重要。您希望 CSS 应用于所有带有 的元素id="menu"还是仅适用于带有 的ul元素id="menu"？这就是区别。

于 2012-05-18T17:34:25.233 回答
0

我想给出与@jacktheripper 相同的答案，但想添加以下内容：

是的，ul#menu li更具体，但它也需要更多的解析时间，因为 CSS 从右到左读取选择器。所以它挑选出所有元素#menu，然后收集所有UL-lists 并从中选择包含先前找到的#menu.

这在使用长链选择器时会产生更大的不同：（#mainmenu ul.menu li.current ul li.current而不是可能#mainmenu .current .current）。

于 2012-05-18T17:35:36.420 回答