这两个选择器有什么区别答案

【问题标题】：What is the difference between these two selectors这两个选择器有什么区别
【发布时间】：2014-11-09 19:02:37
【问题描述】：

这有什么区别

#id {
}

还有这个

div#id {
}

【问题讨论】：

是的。首先，将匹配 ID 为 #id 的任何元素（p、span 等）。在第二种情况下，只会匹配一个ID为#id的div。
还有一个重量问题。
所以这个问题“太宽泛”或“寻求调试帮助”。很有趣。

标签： html css difference

【解决方案1】：

是的。主要有两点不同：

第一个选择器匹配任何带有id="id"的元素，而第二个选择器只匹配带有该id的div元素。
第二个选择器更具体，因此如果您同时拥有两者并且它们匹配相同的元素，则第二个选择器的样式将具有优先权。

通常你会使用第一个选择器。由于 id 在页面中应该是唯一的，因此它只会针对单个元素。

如果您对多个页面使用相同的样式表，并且您希望在特定条件下定位 id，或者如果您希望通过使其更具体来覆盖另一个规则，则第二个选择器将很有用。

【讨论】：

【解决方案2】：

选择器的行为不同：

#id 与写 *#id 相同（如果省略标签名称，则隐含 asterisk selector）。
它匹配任何 ID 为 id 的元素。
div#id 匹配一个为 div 且 ID 为 id 的元素。
它比上面的例子更具体。

一般来说，使用 #id 选择器就足够了，因为 id 在页面内是（应该是）唯一的。但是，在某些情况下您可以使用div#id。

示例 1

您将不同的元素用于相似的目的，因此您希望为它们分配相同的 id 但样式不同，那么您必须更具体：

<!-- page 1 -->
<ul id="features" title="All amenities">
    <li>Spa</li>
    <li>Pool</li>
</ul>

<!-- page 2 -->
<ol id="features" title="Top 3 amenities">
    <li>Spa</li>
    <li>Pool</li>
</ol>

示例 2

您可以添加标签名称以将 weight 添加到您的选择器。考虑这个例子：

<div id="header">
    <img>
    <div id="logo"><img></div>
    <img>
</div>

/* file 1 */
#logo   img { border: thin solid; }
/* file 2 */
#header img { border: 0; }

第一条规则为 logo 内的图像添加细边框，另一条规则从标题内的所有图像（包括 logo 内的图像）中删除边框。为了强制使用细边框规则，您可以将其更改为 div#logo img，使其比其他规则更具体。

【讨论】：

【解决方案3】：

简短回答：是的。

#id {} 以单个 ID 选择器为目标，无论何时应用于单个 HTML 文档。例如，<span id="id">...</span>，或<p id="id">...</p>

div#id {} 将查找 ID 为 #id 的 <div> 元素，例如：<div id="id"></div> 并且不能用于任何其他标签除了<div>。

请注意，在 HTML 文档中，ID 选择器只能使用一次。

关于这个问题的更大规模和更结构化的案例，你应该看看CSS Specificity；一种编写良好且最佳实践的 CSS 特异性方法。

另外，请查看CSSGuidelin.es，这是另一个关于处理 CSS 选择器及其差异的精心编写的文档。

【讨论】：

【解决方案4】：

#elementid 选择器将选择 ID 为 "elementid"

的所有元素

另一方面，div#elementid 选择器只会选择 id 为 "elementid"

的 div

【讨论】：