Question

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

</div>

但这不起作用！ blah的宽度直到取消了“更宽”的等级。

Answer 1

你所遇到的是CSS specificity问题。

.wider具有0,0,1,0的特异性，而#normal具有0,1,0,0。除了ID（或内联定义之外），您不能使用除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

Answer 2

使用＃blah.wider来解决这个问题

Answer 3

您可以使用!important修饰属性以增加其重要性。

.wider
{
    width:9000px !important;
}

Answer 4

正如人们已经提到的，ID的特异性为100，而一个类只有10。

建议的答案（不使用!important）的替代方法是从#normal删除属性冲突（宽度），并将其应用于第二个类。所以它看起来像：

#normal {
     padding : 0;
     margin : 0;
}

.normal {
     width : 400px;
}

.wider {
     width : 1000px;
}

让您的实际标记为：

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

你想要'正常宽度'和：

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

你想要超宽元素的地方。您可能需要返回使用#normal添加.normal课程的网页，但这样可以解决您的问题。

我也认为Gerben的答案也有效 - 给ID属性增加了10个特异性（总共110），它应该覆盖#normal width属性。

#normal.wider {
     1000px;
}

Answer 5

256个CSS类可以覆盖#id：http://codepen.io/chriscoyier/pen/lzjqh

Alin Purcaru的回答解释了css优先级计算的基本规则。但可以在http://hackerne.ws/item?id=4388649

找到对实施的解释

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

5 个答案: