如何让两个不同样式的HTML Table的CSS互不干扰？

问题场景 #

页面中有两个样式完全不同的HTML表格：

• 第一个表格使用table table-bordered table-responsive table-hover类
• 第二个表格使用自定义类aTable

添加aTable的CSS样式后，第一个表格莫名出现了竖线，移除aTable样式后恢复正常。需要让两个表格样式完全独立，同时保证第二个表格达到预期样式效果。

问题原因 #

问题出在你写的CSS选择器上：

.aTable  th, td {
    border: 1px solid black;
    background-color: #DDD;
}

这里的逗号分隔选择器中，td没有添加.aTable前缀，相当于同时设置了.aTable th和全局所有<td>元素的样式，所以第一个表格的<td>也被加上了边框，导致出现竖线。

解决方法 #

给td也加上.aTable前缀，确保样式只作用于aTable表格内部的元素：

修正后的完整CSS代码：

.table tr:nth-child(even) {
    background: #FFF;
}

.table tr:nth-child(odd) {
    background: #D8EBFB;
}

.table tr:first-child {
    background: #add8e6;
}

.aTable{
    width:85%;
}
/* 修正选择器，限定仅作用于aTable内的th和td */
.aTable th, .aTable td {
    border: 1px solid black;
    background-color: #DDD;
}

效果验证 #

修改后：

• 第一个表格会保持原有样式，不会再出现多余竖线
• 第二个aTable表格会应用指定的宽度、边框和背景样式，与第一个表格完全独立

内容的提问来源于stack exchange，提问作者Alex