Question

CSS中的div＃test和#test选择器之间有区别吗？

如何在ID之前添加'div'有帮助？推荐哪种方法？

Answer 1

使用

#test

为具有单一唯一ID ，'test'的任何元素指定规则。在1页上有始终一个唯一ID。

如果您的样式表在多个HTML文档之间共享，其中id测试可能具有不同的含义，例如

div#test OR p#test

也声明了标记名。

Answer 2

除div#test仅匹配<div>元素外，它还具有比#test更高的特异性，因此您可以使用以下代码：

div#test { color: green; }
#test { color: red; }

... #test的颜色为绿色，假设它是<div>元素。但是，ID选择器通常不需要特异性，因为它们必须是唯一的，除非它有可能在祖先之间移动或者可能应用于不同的元素。

总之，如果元素始终是静态#test，请使用<div>。

另见：

Answer 3

div #test仅匹配id为'test'的div元素，＃test匹配id为'test'的任何元素。

Answer 4

div#test将 div 与id =“test”匹配。 #test将任何元素与id =“test”匹配。 Id基本上存储在哈希表/索引中并且是直接查找;没有必要用元素来限定它们。

所以我建议坚持使用#test。

Answer 5

从How do I make a class take precedence over an ID

采取并略微修改

<div id="container" class="wrapper">
    <div id="normal" class="wider">
</div>

对于这个HTML片段，一些可能的选择器按特异性降序排列：

CSS Selector         -> Specificity
---------------------------------------
#container #normal   -> 0,2,0,0
#container .wider    -> 0,1,1,0
#normal.wider        -> 0,1,1,0
div#normal           -> 0,1,0,1 // this is the case you're asking about
#normal              -> 0,1,0,0
.wrapper .wider      -> 0,0,2,0
.wider               -> 0,0,1,0

由于ID是唯一的（每页），你会进入深奥的CSS，你需要担心div#test和#test之间的区别 - 正如Caspar Kleijne所提到的，多页的CSS文档可能是最有可能出现的情况。

div.test与.test相比，更可能出现这种情况，因为您可以在任何给定页面上最简单地使用类特性。

CSS中的div＃test和#test之间的区别

5 个答案: