CSS规则未被覆盖

Question

我遇到了一个奇怪的问题，在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; }

但是这个没有：

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

（在线试用：http://jsfiddle.net/xkduyk7m/）

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

为什么？

Answer 1

每个css选择器都有一个值＆＃34; weight＆＃34;。组合使它相互覆盖，当它们匹配时，写入顺序将定义优先级。

以下是W3关于如何计算优先顺序的文档：http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 2

Css规则不受限制。更具体的css选择器将覆盖另一个不太具体的。地方仅用于具体的情况。

在您的情况下，#table td比#cell更具体，因此不会被覆盖。 如果您使用#table #cell，则应该可以使用

Answer 3

你的问题是#table td {padding：10px;将以#table td {padding-top：10px;填充右：10px的;填充底：10px的;填充左：10px的;通过浏览器。这优先于#cell {padding-top：0px; }。尝试其中一个失败的选项

选项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应用程序进行粗体扩展，并且哈希使其大胆抱歉