CSS规则未被覆盖

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

给定以下html代码：

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

但这一条没有：

#表td{padding:10px；}
#单元格{填充顶部：0px；}

（在线试用，网址：）

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

---

为什么？

Css规则不受位置限制。更具体的css选择器将覆盖另一个不太具体的css选择器。地点仅在两者都是特定的情况下使用

在您的情况下，

#表td

比

#单元格

更具体，因此不会被覆盖。

---

如果使用

#table#cell

它应该可以工作

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

以下是W3关于如何计算优先级的文档：

您的问题是#table td{padding:10px；}将被浏览器改写为#table td{padding top:10px；padding right:10px；padding bottom:10px；padding left:10px；}。这个优先级高于你的#单元{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; }

---

很抱歉使用stack overflow android应用程序将其加粗，哈希使其加粗。很抱歉，

请检查：更复杂的规则具有更高的优先级要解决此问题，只需更改第二个示例，使

#cell{padding top:0px！important；}

#table#cell或td#cell将被覆盖。@alexpmil从不使用

！重要信息

除非您没有其他方法来解决问题。好吧，我对“特殊性”有不同的想法，因为in-id只适用于一个元素，比选择多个元素的选择器更为特殊。它更常用于类，我想浏览器对类和id使用相同的规则。如果将示例替换为类，则可以直接看到单元格没有表中的单元格具体。这并不总是最符合逻辑的解释才有可能获胜；）这是你通过反复试验学到的东西，一个好的源代码检查器也能帮上大忙！；）对于班级来说，这确实是有意义的。此外，来源审查员实际上向我指出了这样一个事实，即第二条规则已被发现，但没有适用于第一条规则。但愿它能告诉你为什么！这就是试错的部分。当你能够解决问题时，通常会感到非常自豪！即使在很多情况下，你本来就不应该犯错误；）