我有一个带有 ID 的 div:
<div id="main">
之间的正确(或区别)是什么
div#main {
和
#main {
问候,
关于使用高效的 CSS 选择器有一个很棒的文档,专注于使用过度合格的选择器的规则:
ID 选择器根据定义是唯一的。包含标签或类限定符只会添加需要进行不必要评估的冗余信息。
您的选择器不仅将样式应用于具有 id 的元素,main
还将通过检查它是否也是div
(按该顺序)来重新限定元素。澄清一下:css选择器是从右到左评估的,这与在jQuery等中使用的选择器语法不同。
Re pixelistik 的建议div#main
比#main
- 是的,这在技术上是正确的,但是如果你不得不求助于这个来提高规则的特异性,那么你正在处理的 CSS 的结构很可能没有像它应该的那样经过深思熟虑.
#main
匹配 ID 为“main”的所有内容,而div#main
仅匹配<div>
ID 为 main 的元素。
理想情况下,您永远不应该有两个具有相同 ID 的元素,因此实际上这两者并没有什么区别,但是关于指定是否div
使其更快地找到结果可能存在与性能相关的问题。
所以区别在于:
当您编写div#main
样式时,将仅适用于<div>
元素。当您编写#main
时,它可以用作<div>
、 <span>
、<p>
等的样式。
而且推荐的东西很难说,每个开发者都有它的不同。所以我使用例如
span.<nameClass>
嵌套在<li>
例如时。
#nav li span.href a {
...
}
我认为当您希望具有特定名称的某个类只能具有一个元素时使用它。
所以当你写span#href
它时,它只适用<span id="href">Simply dummy text</span>
于其他人。当你写#href
它时,它会起作用,<span id="href">Simply dummy text</span>
或者<a href="#" id="href">Link</a>
当你问这个问题时两者都是正确的。我在上面写的差异。
两者都是正确的。
div#main
比 更具体#main
,这意味着使用第一个选择器定义的样式将覆盖第二个选择器的样式。
这是对 CSS 特异性的一个很好的介绍:http: //htmldog.com/guides/cssadvanced/specificity/