將CSS選擇器應用於不相關的元素？

我有兩個表的簡單頁面調用table-a和table-b：將CSS選擇器應用於不相關的元素？

<table id="table-a"> 
    ... 
</table> 

<table id="table-b"> 
    ... 
</table>

我用下面的CSS樣式這兩個表格的外觀：

#table-a { 
    width: 100%; 
} 

#table-a td, tr, th { 
    border: 1px solid #000000; 
} 

#table-b { 
    width: 100%; 
} 

#table-b td, tr, th { 
    border: 1px solid #000000; 
    padding-left: 5px; 
}

的問題是，padding-left: 5px;table-b也適用於第一張表table-a。

這是如何發生，如何防止這樣的事情發生？

我真的無法弄清楚如何來解決這個問題：（...

我認爲，使用下，只有那些元素的影響是「內」 table-b而不是那些內table-a：。

#table-b td, tr, th { 
    /* ... */ 
}

任何幫助表示讚賞

來源

2012-10-02 user1136324

這裏不需要簽名（它們甚至不被允許，詳情請參閱常見問題解答） – keyser

逗號後：'，'新選擇器開始。所以你要選擇所有的'tr'和'th'。 – keyser

你的第二選擇#table-b td, tr, th {...]選擇所有的TD，TR和文檔中的部份你得表中選擇預先考慮到每一個：

#table-b td, 
#table-b tr, 
#table-b th {...]

還將#table-a加到其他選擇器中。

來源

2012-10-02 09:18:38 Kyle

...tr, th { 
    border: 1px solid #000000; 
    padding-left: 5px; 
}

這適用於所有表行與頭。

如果你想申請＃表一的規則，你需要在TR之前和TH指定表ID：

#table-a td, #table-a tr, #table-a th { 
    border: 1px solid #000000; 
    padding-left: 5px; 
}

來源

2012-10-02 09:19:01

試試這個：#table-b td, #table-b tr, #table-b th，而不是這個#table-b td, tr, th。您的版本將選擇器應用於＃table-b td AND th AND tr

來源

2012-10-02 09:22:08 lvil

將CSS選擇器應用於不相關的元素？

回答

相關問題