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 回答