Question

我不是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的表现方式感到很失落。。

任何人都可以对这种行为有所了解吗？

一个是首选方法而另一个是瞧不起，如果是这样，为什么（这是我的主要问题）？

提前致谢

Answer 1

这些行为有所不同，因为#byIdName div指的是父类型为#byIdName

的div类型的子节点

此div#ByIdNameTwo引用ID为#byIdNameTwo

的所有div

直接儿童使用#byIdName>div

任何孩子，包括孙子孙女......等等。使用

#byIdName div

Answer 2

！important规则是一种制作CSS级联的方法，但也有一些你觉得最重要的规则。

虽然根据特定于浏览器的实现，这种方式有所不同。

此处有更多信息：http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Answer 3

嘿嘿，这有点难以解释，但这是我的尝试：

通常，更具体的选择器将覆盖更一般的选择器。 ID 意味着非常具体（每页一个），类更强一般（每页多少）。

所以当你使用#byIdName div时，它会为id为'#byIdName'的元素内的任何div重写类'.ttwo'，因为以id开头的声明更具体。

在第二种情况下，div#ByIdNameTwo仅指具有该ID的div，不会影响子div。

我希望能够解释它。

- 另外，我强烈建议您避免使用！important规则，因为它有助于以后维护代码（并且它表明程序员并不真正理解级联规则）。我并不是说这是一种个人冒犯，我过去常常爱!important，但它的hacky和更好的避免。

Answer 4

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

此代码块仅定位具有“byIdName”属性的元素INSIDE的div。

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

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

此外，ID选择器将覆盖类选择器，因为它更具体。添加“！important”将解决这个问题，但不建议这样做。当有更好的替代品时，使用“！important”并不是一种应该鼓励的做法。

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

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

作为补充说明，尽量避免在css选择器中使用不必要的元素（例如在这些情况下使用“div”）。它实际上需要CSS选择器引擎找到匹配这些类型的规则，而不仅仅是使用ID或类名。

CSS问题：什么有优先权？

4 个答案: