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工作？

Answer 1

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

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

The CSS 2.1 rules are located here。这些规则是：

如果声明来自的是1，则是一个'style'属性而不是带有选择器的规则，否则为0（= a）（在HTML中，元素的“style”属性的值是样式表规则。这些规则有没有选择器，所以a = 1，b = 0，c = 0，d = 0.）
计算选择器（= 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，因此第一条规则获胜。

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

使用!important使规则更“重要”。我会避免这样做，因为当你有很多规则散布在几个文件上时会让人感到困惑。
为要修改的td使用更高级别的选择器。您可以为其添加类名或ID，这样您就可以从链接的CSS文件中取代规则。

示例：

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

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

Answer 2

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

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

Answer 3

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

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

如果您正在寻找没有！重要的答案，您应该阅读CSS specificity specifications。链接网站对其工作方式有一个很好的解释，但基本上它从最重要到最不重要，其中id选择器最重要，类选择器第二，元素选择器第三。

Answer 4

请改为尝试：

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

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

Answer 5

您可以尝试添加！你的内联css的重要标志。

e.g。

{填充左：10px！重要; }

另外，有关css规则排序的一般规则，请看一下：

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

Answer 6

这样做：

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

CSS的优先级如下：

如果某个规则有ID，那么它将先于其他任何规则。
如果某个规则具有class属性，则它将位于仅标记规则之前。
如果两个规则同时包含ID或标签，那么它们的数量将解除“战斗”。

示例：

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

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

虽然您的div同时具有ID和类，但ID规则将覆盖.class规则。

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

Answer 7

好吧，我承认我在这里玩游戏的时间已经很晚了......但是3年后我猜我仍然可以为第一名的答案拍摄..

在我的回答中，额外的酱汁是有一个2级的班级名称的css exexple ..

在下面的示例中，您可以看到没有类的'td'获得“.interval td”样式，带有“indragover”类的td获得“table.interval td.indragover”样式..

（这个代码来自html拖放，所以有一些javascript将'indragover'类应用于dragenter中的td，dragleave事件）

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

Answer 8

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

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

id比class更具体，2.p {font-size: 12px} p.bio {font-size: 14px}比元素更具体。

p.bio

第二行CSS（class="bio"）比class段中的第一行更具体。

p的优先级高于HtmlHelper.Raw元素。

CSS优先级

8 个答案: