html - 如何让类(class)优先于ID？

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

</div>

但这不起作用!等等的宽度直到取消类“更宽”的为止。

最佳答案

您所拥有的是CSS specificity问题。
.wider具有0,0,1,0的特异性，而#normal具有0,1,0,0。除了ID(或内联定义，但此处不是这种情况)之外，您不能使用其他任何ID打败ID。

如果无法将所需的width声明放入#normal选择器中，我建议将其放入#normal.wider中，或者，如果不可能，则在层次结构中尽可能高的位置找到一个已标识的容器，例如#container(也许是 body 上的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