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;}

我在 rightcolumn ID 中有一个表格，我希望其中的单元格有一点填充。但是，引用的样式表优先于内联样式。我通过视觉和 Firebug 看到了这一点。如果我在 Firebug 中关闭 padding:0 指令，padding-left 就会生效。

如何让 padding-left 起作用？

Answer 1

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

基本上在您的情况下 .rightColoumn * 比 td “更具体”，因此即使它出现得更早，该规则也会获胜。

The CSS 2.1 rules are located here .这些规则是:

• 如果声明来自“style”属性而不是带有选择器的规则，则计数 1，否则为 0 (= a)(在 HTML 中，元素的“style”属性的值是样式表规则。这些规则具有没有选择器，所以 a=1、b=0、c=0 和 d=0。)
• 统计选择器中ID属性的个数(= b)
• 统计选择器中其他属性和伪类的个数(= c)
• 统计选择器中元素名和伪元素的个数(=d)

连接四个数字 a-b-c-d(在大基数的数字系统中)给出特异性。

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

.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>

编辑:修复了 * 的特异性规则。 David 的评论促使我重新阅读规范，它确实表明 * 选择器对特异性分数没有任何贡献。