css - 覆盖 CSS 样式

Question

我正在定义一些 CSS 类，这些类在应用于表格时会生成一些默认样式。

例如，假设我创建了一个名为 myTable 的类:

.myTable {
  th {
    background-color: #000;
  }

  td {
    background-color: #555;
  }
}

因此，任何具有 .myTable 类的表格默认情况下都会在 th 和 td 上获得这些颜色。

我想如果另一个类被分配给一个单独的 td，那么它会覆盖默认样式。

所以如果我有另一个类:

.red { background-color: red; }

还有一张 table :

<table class=myTable>
  <th class="red">Content</th>
  <td>Hello!</td>
</table>

我认为“红色”类会导致页眉的背景为红色，而不是黑色。事实并非如此。为了让这个类覆盖原来的，它必须像这样在 myTable 类中定义:

td.red { background-color: red; }

我是否遗漏了什么，是否有另一种方法可以让默认样式更容易被覆盖？

Answer 1

这个想法是，使用哪种样式取决于两件事:选择器的具体程度，规则的位置(最新规则获胜)。示例:

p {
  background-color: red;
}

p {
  background-color: blue;
}

段落将是蓝色的。另一个例子:

body p {
  background-color: red;
}

p {
  background-color: blue;
}

段落将是红色的，因为“body p”更具体。

编辑:同时尽量避免使用 !important。它受支持，但副作用是您永远不能(永远)覆盖它。因此，仅在您无法知道如何构建足够具体的规则(例如:通用 print.css)的真正极端情况下使用它。