如何使一个类优先于一个id？

Question

<div id="normal" class="wider">

</div>

但这不起作用!blah的宽度直到取消了"更宽"的等级.

Answer 1

你有什么是CSS特异性问题.

.wider具有特定的0,0,1,0同时#normal具有0,1,0,0.你不能用ID以外的任何东西来打败ID(或内联定义,但这不是这种情况).

我建议,如果你不能把所需的width声明放在#normal选择器中,就是把它放进去,#normal.wider或者,如果不可能的话,有一个标识的容器,比如说#container,层次结构尽可能高(也许是一个ID身体？)并替换.wider为#container .wider.这个新选择器的特异性0,1,1,0要高一些0,1,0,0.

使用!important也会起作用,但它应该仅作为最后的手段使用.

例:

<div id="container" class="wrapper">
    <div id="normal" class="wider">
</div>

对于此HTML代码段,一些可能的选择器按特定顺序降序为:

CSS Selector         -> Specificity
---------------------------------------
#container #normal   -> 0,2,0,0
#container .wider    -> 0,1,1,0 // These two have the same specificity so
#normal.wider        -> 0,1,1,0 // the last declared value will be used
#normal              -> 0,1,0,0
.wrapper .wider      -> 0,0,2,0
.wider               -> 0,0,1,0