CSS 优先级

我的网页包含：

<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 看到了这一点。如果我关掉padding:0Firebug中的指令，padding-left生效。

我怎样才能得到padding-left上班？

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

基本上就你的情况而言.rightColoumn *比“更具体”td因此，尽管该规则出现得更早，但它还是胜出。

CSS 2.1 规则位于此处。这些规则是：

• 如果声明来自“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. Use !important使规则变得更加“重要”。我会避免这样做，因为当您有很多规则分布在多个文件中时，这会令人困惑。
2. 对要修改的 td 使用更高特异性的选择器。您可以向其中添加类名或 id，这将允许您取代链接的 CSS 文件中的规则。

Example:

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

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