应用于不相关元素的 CSS 选择器

Question

我有一个简单的页面，里面有两个表，分别是table-a和table-b：

<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;
}

问题是table-b的padding-left: 5px;也适用于第一个表table-a。

这是如何发生的，我该如何防止它发生？

我真的不知道如何解决这个问题:(...

我认为通过使用以下方法，只有那些"内部"table-b的元素受到影响，而不是table-a内的元素：

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

任何帮助，不胜感激。

Answer 1

您的第二个选择器#table-b td, tr, th {...]选择文档中的所有td，tr和ths。您必须在每个表选择器前面

附加：

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

还要将#table-a附加到其他选择器。

Answer 2

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

这适用于所有表行和标题。

如果要应用 #table-a 的规则，则需要在 tr 和 th 之前指定表 id：

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

Answer 3

试试这个：#table-b td, #table-b tr, #table-b th而不是这个#table-b td, tr, th。您的版本将选择器应用于 #table-b td 和 th 和 tr