html - 应用于不相关元素的 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 也添加到其他选择器。