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

我在ID为rightcolumn的表格中想要在单元格中添加一点内边距。但是，所引用的样式表优先于内联样式。我可以通过视觉和Firebug看到这一点。如果我在Firebug中关闭padding:0指令，则padding-left会生效。

如何使padding-left生效？

- user80603

---

这回答了你的问题吗？CSS 的优先顺序是什么？ - Inigo

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）。

将四个数字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. 为要修改的使用更高特异性的选择器。您可以为其添加类名或ID，这将允许您取代链接的CSS文件中的规则。

例如：

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

编辑：修正了对于*选择器的特异性规则。David的评论促使我重新阅读规范，发现*选择器不会对特异性得分产生影响。

- Mr. Shiny and New

---

我同意。根据W3C页面，我认为星号选择器不计入d级（或任何级）的特异性，所以.rightColumn * 应该得分为0010。我还建议使用 .rightColumn td {} 来设置填充；这样可以获得足够好的得分0011。 - David Kolar

你能解释一下为什么.rightColumn属于“其他属性和伪类”吗？我猜原因是在行内，类是使用HTML属性class表示的。 - LarsH

换句话说，div.value 是 div[class~=value] 的简写形式。 - LarsH

@LarsH：是的，似乎[class~=value]与.value具有相同的特异性。但请注意，[id=idvalue]的特异性低于#idvalue。 - Mr. Shiny and New 安宇

Answer 2

正如其他人所提到的，你遇到了一个特异性问题。在确定哪个规则应该优先使用时，CSS引擎会计算每个选择器中 #id 的数量。如果其中一个比另一个多，则使用它。否则，它将以相同的方式继续比较 .class 和 tag。在这里，样式表规则上有一个类，但内联规则上没有，因此样式表规则具有优先权。

你可以使用 !important 来覆盖这个问题，但这是一个非常大的工具，不适合在这里使用。你最好提高内联规则的特异性。根据你的描述，似乎你的 .rightColumn 元素要么是一个 table，要么包含一个 table，并且你想让该表格中的单元格具有额外的间距？如果是这样，你需要使用的选择器是 ".rightColumn td"，它比样式表规则更具体，将具有优先权。

- Ben Blank

---

!important在CSS中的作用，就像DoEvents在VB6中的作用一样。 :) - BobRodes

Answer 3

让它正常工作的最简单方法是在CSS中添加“！important”以确保其优先级（除非您有多个!important规则）：

td {
    padding-left: 10px !important;
} 

如果您需要不带! important的答案，您应该阅读CSS特异性规范。链接的网站有很好的解释，但基本上它从最重要的到最不重要的，其中id选择器最重要，类选择器第二重要，元素选择器第三重要。

- Daniel Lew

---

当使用!important时要小心。如果有其他人与您一起处理代码，而他们不熟悉您对!important规则的使用，这将增加维护问题。 - Rahul

更不用说它会打破优先级，如果你正在查看一个应该被应用但却没有被应用的规则，那么这将会令人困惑。 - Andrew Hare

我同意应该谨慎使用 !important，但是当有人开始过度复杂化他们的选择器以使其更具体时，我也认为这同样是有问题的。例如，在这个例子中，它会变成 td.rightColumn * { ... }，这对一个本来简单的选择器来说是可怕的改变。 - Dan Lew

Answer 4

好吧，我承认我在这方面有点晚了...但是三年过去了，我想我仍然可以争取第一名的答案。

我的答案中多了一些额外的内容，其中有一个带有两个级别的 CSS 类名的示例。

在下面的示例中，您可以看到没有类的“td”获取“.interval td”样式，而具有“indragover”类的“td”获取“table.interval td.indragover”样式。

（此代码适用于 HTML 拖放，因此某些 JavaScript 应用“indragover”类于 dragenter、dragleave 事件中的 td）

// put this in a css file
.interval {
    height: 100%;
    width: 100%;
    background: #FFFFCC;
    border: 2px solid #000000;
    border-collapse: collapse;
}

table.interval tr td {
    border: 2px solid black;
    color:#112ABB;
    background: #FFFFCC;
    height: 20px;
}

table.interval td.indragover {
    background: #AAAA00;
}

// put this in a html file
<table class="interval">
<tr><td>blah</td><td class="indragover">blah</td></tr>
<tr><td class="indragover">blah</td><td>blah</td></tr>
</table>

- dancl

---

使用两个类名只是向选择器添加更多规则，从而增加了特异性。您还可以通过添加更多元素或在其中使用ID来实现相同的结果。 - Mr. Shiny and New 安宇

Answer 5

试试这个：

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

外部样式表中的td更加具体，因此它胜出。如果您使用元素名称限定rightColumn类，则将应用页面级样式。

- Andrew Hare

Answer 6

做这个：

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

CSS中的优先级如下：

• 如果某个规则具有ID，则它将优先于其他任何规则。
• 如果某个规则具有类属性，则它将优先于仅具有标记的规则。
• 如果两个规则都具有ID或标记，则它们数量多的获胜。

示例：

<style type="text/css">
  #myid{
    padding: 10px;
  }

  .class{
    padding: 20px;
  }
</style>
<div id="myid" class="class"></div>

虽然你的DIV具有ID和类，但ID规则将覆盖类规则。

要了解有关CSS规则优先级的更多信息，我建议您阅读http://www.w3.org/TR/CSS2/cascade.html#specificity。

- Seb

Answer 7

你可以尝试在内联 CSS 中添加 !important 标志。

例如：

td { padding-left:10px !important; }

此外，如果想了解有关 CSS 规则排序的一般规则，请查看以下内容：

http://www.w3.org/TR/CSS2/cascade.html#specificity

- deanWombourne

---

哇，这是我第一次在StackOverflow上发布问题。感谢大家的回复，它们让我更深入地思考了这个问题。 - user80603

Answer 8

1.div p.bio {font-size: 14px}
#sidebar p {font-size: 12px}

CSS的第一行看起来可能更具体，但实际上上面的第二行对于段落的字体大小更具体。

id比class更具体，而class比元素更具体。

2.p {font-size: 12px}
p.bio {font-size: 14px}

CSS 的第二行（p.bio）比第一行更具体，涉及到你的 class="bio" 段落。

class 的优先级高于 p 元素。

- asim muhammad