blocks|key|794567|text|对于这些特定元素，呈现的结果不会有所不同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|794568|但是，ul#menu+li更具体，因为它针对类型为li的所有元素，其中包含父id+#menu和ul类型。|offset|length|style|CODE|794569|想象一下选择器，如UL+>+#MENU+>+LI|unordered-list-item|794570|#menu+li只针对具有父id+#menu的li类型的所有元素。|794571|想象一下选择器，比如#MENU+>+LI|794572|在大多数情况下，他们都会做同样的事情。#menu+li不应该对页面上的其他元素产生任何影响，因为id是特定的，因此，正如下面的注释所建议的那样，它是不必要的。因此，我会坚持#menu+li。|794573|entityMap^0|0|3|A|P|2|15|5|1B|2|0|0|0|8|H|5|N|2|0|0|J|8|2E|8|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|13|8|@$D|14|E|15|F|G]|$D|16|E|17|F|G]|$D|18|E|19|F|G]]|9|@]|A|$]]|$1|M|3|N|5|J|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|R|$]]

The results rendered will not be different for those specific elements. 

However, <code>ul#menu li</code> is more specific, as it targets all elements of type <code>li</code> with parent id <code>#menu</code> and type <code>ul</code>.

<ul>
<li>Imagine the selector like UL > #MENU > LI</li>
</ul>

<code>#menu li</code> only targets all elements of type <code>li</code> with parent id <code>#menu</code>.

<ul>
<li>Imagine the selector like #MENU > LI</li>
</ul>

For most purposes, they will do exactly the same thing. <code>#menu li</code> should not have any effect on other elements on the page, as id is specific, and therefore, as suggested in the comments below, it is unnecessary. As such, I would stick to <code>#menu li</code>.

blocks|key|794620|text|不同之处在于特异性。ul#menu更具体，并且认为规则目标的元素必须是具有菜单id的<ul>。假设您将<ul>更改为具有菜单id的<div>，它将无法工作(不更改您的css)。另外，如果只使用#menu定义某些内容，则可以通过使用ul#menu使规则更加具体来添加重写。您可以在这里阅读更多内容：选择战.专一性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|794621|entityMap|0|LINK|mutability|MUTABLE|url|http://3nhanced.com/css/battle-of-the-selectors-specificity/^0|A|7|16|4|1F|4|1T|5|2O|5|37|7|44|7|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

The difference is specificity. The <code>ul#menu</code> is more specific and deems that the element the rule targets must be a <code>&lt;ul&gt;</code> that has an id of menu. Say you change your <code>&lt;ul&gt;</code> to a <code>&lt;div&gt;</code> that has an id of menu it wouldn't work (without changing your css). Also if you define something with just <code>#menu</code> you can add overrides by making the rule more specific by using <code>ul#menu</code>. You can read more here: <a href="http://3nhanced.com/css/battle-of-the-selectors-specificity/" rel="nofollow">battle-of-the-selectors-specificity</a>.

blocks|key|1274165|text|有一个明显的区别和另一个微妙的差异。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1274166|明显的区别是，#menu使用ID+#menu针对所有元素，而ul#menu只针对ul元素。如果只将ID+#menu给ul元素，则选择器将始终具有相同的结果。|offset|length|style|CODE|1274167|有一个潜在的不同之处叫做特异性。这是确定在发生冲突时使用哪条规则的一种方法。所以，如果你有这两条规则：|1274168|#menu+li+{color:+blue;}
ul#menu+li+{color:+red;}|code-block|syntax|javascript|1274169|第二条规则将获胜，因为它更具体，文本将是红色的。具体性规则是复杂的，并不总是直观的，但在这种情况下，简单的结果是，ul#menu+li比#menu+li稍微具体一些。如果您只有一个样式表，这对您来说不太可能是个问题。如果您有几个样式表，那么找出某个规则被忽略的原因可能会让人感到困惑；答案往往是特定的。|1274170|至于为什么大多数教程使用ul#menu，我不知道。(事实上，我只有你的断言证明他们是这样做的！)我的猜测是，为了白痴读者的利益，他们让事情变得非常明显。|1274171|entityMap^0|0|7|5|H|5|U|7|14|2|1G|5|1M|2|0|0|0|1L|A|1W|8|0|C|7|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]|$D|12|E|13|F|G]|$D|14|E|15|F|G]|$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1A|8|@$D|1B|E|1C|F|G]|$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|T|$]]

There is one obvious difference and one more subtle difference.

The obvious difference is that <code>#menu</code> targets all elements with the ID <code>#menu</code>, whereas <code>ul#menu</code> only targets <code>ul</code> elements. If you only give the ID <code>#menu</code> to <code>ul</code> elements, the selectors will always have the same result.

There is one potential difference with something called specificity. This is a way of determining which rule to use in case of conflicts. So if you have these two rules:

<pre class="lang-css prettyprint-override"><code>#menu li {color: blue;}
ul#menu li {color: red;}
</code></pre>

the second rule will win, because it is more specific, and the text will be red. The rules for specificity are complex and not always intuitive, but in this case the simple result is that <code>ul#menu li</code> is slightly more specific than <code>#menu li</code>. If you only have one stylesheet, this is unlikely to be an issue for you. If you have several stylesheets, it can be confusing to work out why a certain rule is being ignored; specificity is often the answer.

As to why most tutorials use <code>ul#menu</code>, I don't know. (In fact, I only have your assertion as evidence that they do!) My guess is that they are making things Really Very Obvious for the sake of idiot readers.

blocks|key|1274180|text|两者在特性上的差异通常不会产生影响，但我们可以考虑到在何种情况下会发生这种情况。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1274181|如果一个页面上有<div+id="menu"></div>，另一个页面上有<ul+id="menu"></ul>，并且在这两个页面中都使用相同的CSS文件，怎么办？我并不是说这将是一个好的设计决策，但在这种情况下，ul#menu和#menu之间的区别将是非常重要的。您希望CSS应用于所有具有id="menu"的元素，还是只应用id="menu"的ul元素？这就是区别。|offset|length|style|CODE|1274182|entityMap^0|0|8|L|11|J|2Z|7|37|5|42|9|4K|9|4U|2|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]|$D|P|E|Q|F|G]|$D|R|E|S|F|G]|$D|T|E|U|F|G]|$D|V|E|W|F|G]|$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|I|$]]

The difference in specificity between the two will not often make a difference, but we could think of circumstances in which it will.

What if you have <code>&lt;div id="menu"&gt;&lt;/div&gt;</code> on one page and <code>&lt;ul id="menu"&gt;&lt;/ul&gt;</code> on another, and you are using the same CSS file in both? I'm not saying that would be a good design decision, but in that circumstance the distinction between <code>ul#menu</code> and <code>#menu</code> would be important. Do you want the CSS to apply to all elements with <code>id="menu"</code> or only <code>ul</code> elements with <code>id="menu"</code>? That's the distinction.

blocks|key|1274202|text|我想给出与@jacktheripper相同的答案，但想添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1274203|是的，ul#menu+li更具体，但是它也需要更多的解析时间，因为CSS从右到左读取选择器。因此，它选择所有元素#menu，然后收集所有UL-lists，并从这些元素中选择包含先前发现的#menu的元素。|offset|length|style|CODE|1274204|这在使用长选择器链时会产生更大的不同：#mainmenu+ul.menu+li.current+ul+li.current+(而不是#mainmenu+.current+.current)。|1274205|entityMap^0|0|3|A|1K|5|1W|2|2L|5|0|J|16|1U|R|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]|$D|P|E|Q|F|G]|$D|R|E|S|F|G]|$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|K|$]]

I'd like to give the same answer as @jacktheripper, but want to add the following:

Yes, <code>ul#menu li</code> is more specific, but it also requires more parsing time, as CSS reads the selectors from right to left. So it picks out all elements <code>#menu</code> and afterwards gather all <code>UL</code>-lists and from those select the ones, which contain the previously found <code>#menu</code>.

This makes more difference when using long chains of selectors: <code>#mainmenu ul.menu li.current ul li.current</code> (instead of maybe <code>#mainmenu .current .current</code>).

HTML: 

<pre><code>&lt;ul id="menu"&gt;
 &lt;li&gt;&lt;a href="" class="active"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Services&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Request a Quote&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

CSS: 

<pre><code>ul#menu li {
 display:inline;
 margin-left:12px;
}
</code></pre>

Is there a difference between using "<code>ul#menu li</code>" and just "<code>#menu li</code>"? I used both versions and they seem to accomplish the same thing. Is there a reason why most tutorials use add the "ul" before the id?

ul#menu vs #menu?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

：<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="">Testi...

问ul#menu vs #菜单？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ul#menu vs #菜单？EN