CSS优先级

Question

我的网页包含:

<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
td {
    padding-left:10px;
} 
</style>

引用的样式表包含:

.rightColumn * {margin: 0; padding: 0;}

我在rightcolumnID中有一个表,我希望单元格有一点填充.但是,引用的样式表优先于内联样式.我通过视觉和Firebug看到了这一点.如果我关闭padding:0Firebug中的指令,则填充左边生效.

我怎样才能padding-left上班？

Answer 1

大多数答案都是正确的,说这是一个特异性问题,但在解释特异性规则时不正确或不完整.

基本上在你的情况下.rightColoumn *是"更具体" td而且规则获胜即使它提前.

CSS 2.1规则位于此处.这些规则是:

• 如果声明来自的是一个'style'属性而不是一个带选择器的规则,则为1;否则为0(= a)(在HTML中,元素的"style"属性的值是样式表规则.这些规则没有选择器,所以a = 1,b = 0,c = 0,d = 0.)
• 计算选择器中ID属性的数量(= b)
• 计算选择器中其他属性和伪类的数量(= c)
• 计算选择器中元素名称和伪元素的数量(= d)

连接四个数字abcd(在具有大基数的数字系统中)给出了特异性.

所以在你的情况下你有两个规则:

.rightColumn * {} /* a = 0, b = 0; c = 1, d = 0 : Specificity = 0010*/
td {} /* a = 0, b = 0, c = 0, d = 1 : Specificity = 0001 */

0001低于0010,因此第一个规则获胜.

有两种方法可以解决这个问题:

1. 使用!important做出更规则的"重要".我会避免这样做,因为当你有很多规则分散在几个文件上时会让人感到困惑.
2. 对要修改的td使用更高特定的选择器.您可以为其添加类名或ID,这将允许您从链接的CSS文件中取代规则.

例:

<style>
  .rightColomn * { padding: 0; } /* 0010 */
  td#myUnpaddedTable { padding: 10px; } /* 0101 */
  td.anUnpaddedTable { padding: 10px; } /* 0011 */ 
</style>

编辑:修正*的特异性规则.大卫的评论促使我重新阅读规范,这确实表明*选择器对特异性得分没有贡献.

Answer 2

正如其他人提到的,你有一个特殊性问题.在确定优先选择哪两个规则时,CSS引擎会计算#id每个选择器中的s 数.如果一个人比另一个人多,那就用了.否则,它继续以相同的方式比较.classes和tags.在这里,您在样式表规则上有一个类,但在内联规则上没有,因此样式表优先.

你可以用它来覆盖它!important,但这是一个非常大的锤子在这里使用.您最好改善内联规则的特异性.根据你的描述,它听起来像你的.rightColumn元素是或包含一个table,你希望该表中的单元格有额外的间距？如果是这样,您正在寻找的选择器是" .rightColumn td",它比样式表规则更具体,并且优先.