Question

我有HTML表格，其中应用了以下CSS：

.tbst th,
td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 12px;
    overflow: hidden !important;
    line-height: 24px !important;
}

和

.cmstb th,
td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 14px;
    overflow: hidden !important;
    line-height: 24px !important;
}

一个表使用.tbst类，另一个表.cmstb。但由于某种原因，第二个CSS应用于两个表，因此第二个CSS会覆盖第一个CSS中的样式。我在这做错了什么？

Answer 1

您正确地为th设置样式，但对于td，样式是已编写的，因为它不是特定于任何表的。使其特定于那些表

.tbst th,
 .tbst td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 12px;
    overflow: hidden !important;
    line-height: 24px !important;
}
and

.cmstb th,
.cmstb td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 14px;
    overflow: hidden !important;
    line-height: 24px !important;
}

Answer 2

td课程正在被覆盖。除了font-size之外，它们都使用所有相同的值。你应该用更少的东西压缩它。然后你只会将差异应用到第二个表格。

.tbst th, .tbst td {
padding: 12px 3px !important;
text-align: center !important;
vertical-align: middle !important;
border: 1px solid #ccc !important;
font-size: 12px;
overflow: hidden !important;
line-height: 24px !important; }

和

.cmstb th, .cmstb td { 
font-size: 14px; }

Answer 3

您将td定位两次，最后定义的属性将始终覆盖之前定义的属性。

更好的（并且性能更高）CSS将如下：

.cmstb-th,
.cmstb-td,
.tbst-th,
.tbst-td {
  padding: 12px 3px !important;
  text-align: center !important;
  vertical-align: middle !important;
  border: 1px solid #ccc !important;
}

.tbst-th,
.tbst-td {
  font-size: 12px;
}

.cmstb-th,
.cmstb-td {
  font-size: 14px;
}

为什么过度使用！重要的是这样？大多数情况下，这意味着您有（另一个）继承问题。

CSS类会覆盖其他类

3 个答案: