如何使类优先于id？ [英] How do I make a class take precedence over an id?

问题描述

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

</div>

但这不行！

推荐答案

你有一个 CSS专属性问题。

.wider 具有 0,0,1,0 的特异性，而 #normal 具有 0,1,0,0 。您不能使用除ID以外的任何ID（或内联定义，但这不是这种情况）。

.wider has a specificity of 0,0,1,0 while #normal has 0,1,0,0. You can't beat an ID with anything else than an ID (or inline definitions, but that is not the case here).

如果您不能在＃中放置所需的 width 正常选择器，是把它放在＃normal.wider 或者，如果这是不可能的，有一个已识别的容器，说 #container ，在层次结构中尽可能高（可能是身体上的ID？）并用替换 .wider c $ c> #container .wider 。这个新的选择器将具有 0,1,1,0 的特异性，这比 0,1,0,0 。

What I would recommend, if you cannot put the needed width declaration in the #normal selector, is to put it in #normal.wider or, if that either isn't possible, have an identified container, say #container, as high in the hierarchy as possible (maybe an ID on the body?) and replace .wider with #container .wider. This new selector will have a specificity of 0,1,1,0 which is a bit higher than 0,1,0,0.

使用！important 也可以使用，但它只能用作最后手段。

Using !important will work too, but it should be used only as a last resort.

示例：

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

对于这个HTML片段，一些可能的选择器按照特异性递减顺序是：

For this HTML snippet some possible selectors in decreasing order of specificity would be:

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

这篇关于如何使类优先于id？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！