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

回答