样式特定表而不影响每个表

Question

我的一张桌子有以下css：

.customer-table tr, td, th {
    border: 2px solid black;
}

一切看起来都非常均匀美丽。 但是，当我像这样写我的CSS时，我的网站上的所有表都受到这个样式表的影响，并且它们有2px宽的黑色边框。
然后我试着像这样改变我的CSS：

table.customer-table {
    border: 2px solid black;
}

tr.customer-table {
    border: 2px solid black;
}

td.customer-table {
    border: 2px solid black;
}

th.customer-table {
    border: 2px solid black;
}

并为每个表元素提供了这个CSS类。现在桌子全都搞砸了。

为什么一些细胞的空间现在有所不同？

Answer 1

我会做这样的事情。现在，th，tr和td 必须成为类.customer-table的元素的后代。

.customer-table th,
.customer-table tr,
.customer-table td {
    border: 2px solid black;
}

您的第一个示例定位了包含.customer-table类，任何th，任何tr和任何td的所有元素。 th，tr和td未被.customer-table类“作用域”，并且可以自由地影响页面上的任何相似元素

就单元格的间距而言，我们需要查看完整的CSS和一些标记。根据您的屏幕截图，我可以看到您还没有共享的其他样式应用于您的表格元素。