我的一张表有以下 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 都被搞砸了。
为什么有些单元格的空间现在不同了?
最佳答案
我会做这样的事情。现在 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 和一些标记。根据您的屏幕截图,我可以看到您尚未共享的其他样式已应用于您的表格元素。
关于css - 样式特定表而不影响每个表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43544214/