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

Question

我有一个简单的页面，其中有两个名为table-aand的表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;
}

问题是padding-left: 5px;oftable-b也适用于第一个表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而不是 this #table-b td, tr, th。您的版本将选择器应用于 #table-b td AND th AND tr