代码之家 › 专栏 › 技术社区 › Harrison

什么是先验?

css

Harrison · 技术社区 · 14 年前

我对CSS并不陌生,我只是不太擅长它。今天我遇到了一个“问题”,一个子元素被父元素的css覆盖了。经过一番挠头之后,我意识到我只需要加一个'!对css来说很重要(这表明我的能力对我来说是全新的)

(我举了一个活生生的例子来说明我的问题) http://jsfiddle.net/4RYM3/1/

#byIdName div{  /* #1 */
       margin: 30px;
    background:#FF00FF;
}
div#ByIdNameTwo{  /* #2 */
           margin: 30px;
     background:#00FF00;
}
div.idone{
    margin: 20px;
    background:#FFFF00;
}
div.idtwo{
    margin: 0px;
    background:#cccccc;
}
div.idone2{
    margin: 20px ! important;
    background:#FFFF00 ! important;
}
div.idtwo2{
    margin: 0px ! important;
    background:#cccccc ! important;
}

http://www.w3.org/TR/CSS2/cascade.html#specificity

现在看这个,我不明白为什么1和2的行为看起来不同(请看上面的jsfiddle链接)。
我很高兴我能(和 ! 重要的 )我不知道 为什么? #1和#2的行为方式与他们一样。

有人能解释一下这种行为吗?

一个是首选的方法,另一个被看不起,如果是,为什么(这是我的主要问题)?

提前谢谢

4 回复 | 直到 14 年前

John Hartsock 14 年前

它们的行为不同,因为 #byIdName div 指父项为#byIdName的div类型的任何子项

这个 div#ByIdNameTwo 指任何ID为的div #byIdNameTwo

供儿童直接使用 #byIdName>div

适用于任何儿童,包括孙子、大孙子等

#byIdName div

wajiw 14 年前

这个!重要的规则是一种让你的CSS层叠的方法,但也有你认为最关键的规则总是被应用。

不过,基于特定于浏览器的实现,这种方法的工作方式有所不同。

更多信息请点击此处: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Sebastian Patane Masuelli 14 年前

嘿,谭宁,这有点难以解释,但我的尝试是:

一般来说,更具体的选择器将覆盖更一般的选择器。 身份证 是命中注定的 非常具体 (每页一份), 班级更多 一般的 (每页多少都行)。

所以当你使用 #byIdName div ,它将重写id为“#byIdName”的元素中任何div的类“.idtwo”,因为以id开头的声明更为具体。

在第二种情况下, div#ByIdNameTwo 只引用具有该id的div,不影响子div。

我希望这能解释。

-另外,我强烈建议你避免!重要的规则,因为它是以后维护代码的毒药(它表明程序员并不真正理解级联规则)。我不是故意冒犯你,我以前很喜欢 !important 我自己,但它的老套和更好的避免。

RussellUresti 14 年前

#byIdName div{  /* #1 */
       margin: 30px;
    background:#FF00FF;
}

此代码块仅针对具有“byIdName”属性的元素内部的div。

div#ByIdNameTwo{  /* #2 */
           margin: 30px;
     background:#00FF00;
}

此代码块仅针对id为“byidname2”的div元素。如果它不是具有该ID的div,则将被忽略。

此外,ID选择器将重写类选择器,因为它更具体。添加“!“重要”可以解决这个问题,但不建议这么做。使用“!“重要”不是一种在有更好的替代者时应该鼓励的做法。

更好的解决方案是这样的:

#ByIdNameTwo.idone2 {
  margin: 20px;
  background: #FFFF00;
}

另请注意,尽量避免在css选择器中使用不必要的元素(例如在这些情况下使用“div”)。实际上,CSS选择器引擎查找与这些类型的规则匹配所需的时间比仅使用ID或类名要长。