Question

这个

之间有什么区别吗？

#id {
}

和这个

div#id {
}

Answer 1

是。主要有两点不同：

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

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

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

Answer 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; }

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

Answer 3

简短回答：是的。

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

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

请注意，ID选择器只能在HTML文档中以语义方式使用。

对于这个问题，你需要看一下CSS Specificity; CSS中具体的写作和最佳实践方法。

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

Answer 4

#elementid 选择器会选择ID为“elementid”的所有元素

另一方面， div #elementid 选择器将仅选择ID为“elementid”的div

这两个选择器之间有什么区别

4 个答案: