使用div來定義CSS屬性

我想分離兩個表的CSS屬性，具體取決於它們所在的DIV。如果你看看http://jsfiddle.net/jdb1991/tpXKT/，你會看到「resultA」中的表使用TD屬性定義「resultB」。使用div來定義CSS屬性

據我所知，這已被應用，由於屬性的「級聯」，但爲什麼它被包括，如果我已經使用#resultB選擇器？或者這是無效的？

對於斯塔克的幸福：

#resultA table {border-collapse: collapse} 
#resultA table th, td {border: 1px solid black} 
#resultA table td {background-color: blue} 

#resultB table {border-collapse: collapse} 
#resultB table th, td {border: 5px solid black} 
#resultB table td {background-color: red} 

<div id="resultA"> 
    <table> 
     <tr> 
      <th>Result</th> 
     </tr> 
     <tr> 
      <td>11.5</td> 
     </tr> 
    </table> 
</div>

來源

2012-12-24 jdborg

這是因爲你由其自身確定td兩次。也就是說，選擇器#resultB table th就此結束，當您使用逗號包含td時，您只需將td定義爲獨立元素即可。您需要： #resultA table th, #resultA table td和#resultA table th, #resultA table td爲每個人獲取不同的樣式。

來源

2012-12-24 15:41:08

感謝賈斯汀，這是我的錯;我認爲它會加入選擇器。有什麼辦法可以有一個th＆td？ – jdborg

您可以像上面描述的j08691和我一樣添加它們。第二個'#resultA表td {background-color：red;}'只會覆蓋相似的樣式。所以你爲邊界定義的樣式仍然適用於'th'和'td'。你是這個意思嗎？ –

啊是的，我現在看到。謝謝。我會盡力回答。 – jdborg

CSS中的逗號分隔了選擇器，並且不保留它們之間的任何關係。因爲#resultB table th, td在#resultA table th, td之後，td規則將被最後一條規則覆蓋，因爲它最後到達。您可能需要這樣做：

#resultB table th, #resultB table td {border: 5px solid black}

通過專門定義規則的路徑，確保它不會應用於其他元素。

jsFiddle example

來源

2012-12-24 15:41:21 j08691

使用div來定義CSS屬性

回答

相關問題