CSS class 覆盖其他

Question

我有 HTML tables，其中应用了以下 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;
}

一个table正在使用.tbstclass，另一个.cmstb。但是由于某些原因，第二个 CSS 应用于两个 table，因此第二个 CSS 覆盖了第一个 CSS 中的样式。我在这里做错了什么？

Answer 1

您对 th 的样式设置正确，但对于 td，样式被改写了，因为它不特定于任何 table。使其特定于那些 tables

.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 class 正在被覆盖。此外，它们都使用除了字体大小之外的所有相同值。你应该少用它来压缩它。然后你只会将差异应用到第二个 table.

.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;
}

为什么过度使用 !important？这主要意味着您有（另一个）继承问题。

CSS class 覆盖其他

CSS class overwrites other

html

css

overwrite