5

我有一个带有 ID 的 div：

<div id="main">

之间的正确（或区别）是什么

div#main {

和

#main {

问候，

4

4 回答 4

3

关于使用高效的 CSS 选择器有一个很棒的文档，专注于使用过度合格的选择器的规则：

ID 选择器根据定义是唯一的。包含标签或类限定符只会添加需要进行不必要评估的冗余信息。

您的选择器不仅将样式应用于具有 id 的元素，main还将通过检查它是否也是div（按该顺序）来重新限定元素。澄清一下：css选择器是从右到左评估的，这与在jQuery等中使用的选择器语法不同。

Re pixelistik 的建议div#main比#main- 是的，这在技术上是正确的，但是如果你不得不求助于这个来提高规则的特异性，那么你正在处理的 CSS 的结构很可能没有像它应该的那样经过深思熟虑.

于 2012-05-28T22:37:26.810 回答
2

#main匹配 ID 为“main”的所有内容，而div#main仅匹配<div>ID 为 main 的元素。

理想情况下，您永远不应该有两个具有相同 ID 的元素，因此实际上这两者并没有什么区别，但是关于指定是否div使其更快地找到结果可能存在与性能相关的问题。

于 2012-05-28T22:26:52.087 回答
2

所以区别在于：

当您编写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>当你问这个问题时两者都是正确的。我在上面写的差异。

于 2012-05-28T22:25:58.517 回答
1

两者都是正确的。

div#main比 更具体#main，这意味着使用第一个选择器定义的样式将覆盖第二个选择器的样式。

这是对 CSS 特异性的一个很好的介绍：http: //htmldog.com/guides/cssadvanced/specificity/

于 2012-05-28T22:29:29.843 回答