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

Question

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

</div>

但这行不通! blah 的宽度 till 抵消了“更宽”的类。

Answer 1

你有一个 CSS specificity问题。

.wider 的特异性为 0,0,1,0 而 #normal 的特异性为 0,1,0, 0。除了 ID(或内联定义，但这里不是这种情况)，你不能用任何其他东西击败 ID。

如果您不能将所需的 width 声明放在 #normal 选择器中，我建议将其放在 #normal.wider 或者，如果两者都不可能，则有一个已识别的容器，比如 #container，在层次结构中尽可能高(可能是主体上的 ID？)并替换 。更宽 与 #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