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

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 类。现在 table 都被搞砸了。

为什么有些单元格的空间现在不同了？

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 和一些标记。根据您的屏幕截图，我可以看到您尚未共享的其他样式已应用于您的表格元素。