CSS规则没有被覆盖

我遇到了一个奇怪的问题，其中一个CSS规则似乎没有在Mac上的Safari/Chrome/Firefox上正确应用。CSS规则没有被覆盖

鉴于以下HTML代码：

<table id="table" border="1"> 
    <tr> 
     <td id="cell"> 
      Hello 
     </td> 
    </tr> 
</table>

然后将下面的CSS代码工程，我预期（如细胞不会对顶部填充）：

td { padding: 10px; } 
#cell { padding-top: 0px; }

但是这一次没有：

012：

#table td { padding: 10px; } 
#cell { padding-top: 0px; }

我预计在这种情况下，CSS的两个版本都会产生相同的效果，但在第二种情况下，稍后添加并应用于特定单元格的规则不会覆盖第一个规则。

为什么？

2014-09-03 Samuel

它大胆的遗憾看看这个：http://specificity.keegan.st/ – melancia 2014-09-03 22:04:54

更复杂的规则有更高的优先级 – 2014-09-03 22:04:58

要解决这个问题，只需更改你的第二个例子'#cell {padding -top：0px！important; }' – 2014-09-03 22:05:45

每个CSS选择器都有一个值“weight”。这个组合使得它相互覆盖，当它们匹配时，写入顺序将定义优先顺序。

这里是W3的有关如何计算的优先级文档：

2014-09-03 22:07:03 LcSalazar

感谢您的链接，今天学到了新东西。 – Samuel 2014-09-03 22:12:43

Css规则不受地方限制。更具体的CSS选择器将覆盖另一个不太具体的选择。地点只用于他们都是特定的情况。

在你的情况下，#table td比#cell更具体，因此没有被覆盖。如果您使用#table #cell它应该工作

2014-09-03 22:06:46

好的，我对“特异性”有不同的看法，因为id只适用于一个元素，并且比选择多个元素的选择器更具体。 – Samuel 2014-09-03 22:11:19

它更经常用于类，我猜浏览器对类和id使用相同的规则。如果你用类替换你的例子，你可以直接看到一个单元格不像表格中的单元格。这并不总是最合乎逻辑的解释;）这是你通过反复试验学到的东西，而一个好的源代码检查员也可以帮助你！ ;） – 2014-09-03 22:16:19

有了类，它确实是有道理的。另外，来源检查员实际上向我指出了第二条规则被检测到但不适用于第一条规则的事实。如果只是它会告诉你为什么呢！ – Samuel 2014-09-03 22:19:42

你的问题是，#table TD {填充：10px的; }将作为#table td {padding-top：10px;填充右：10px的;填充底：10px的;填充左：10px的; }通过浏览器。这个优先级超过了#cell {padding-top：0px; }。尝试休耕的一个2个选项

选项1

#table td { padding: 10px 10px 10px 10px; } 
#table #cell { padding: 0px 10px 10px 10px; }

选项2

#table td { padding: 10px; } 
#table #cell { padding-top: 0px !important; }

对不起，使用堆栈溢出的Android应用程序和散列加粗，使该

2014-09-03 22:18:49 Evan

回答