Question

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

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

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

  td {
    background-color: #555;
  }
}

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

我认为如果将另一个类分配给单个td，那么它将覆盖默认样式。

所以，如果我有另一个班级：

.red { background-color: red; }

还有一张桌子：

<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。它受到支持，但副作用是你永远不能覆盖它（永远）。因此，只有在你无法知道如何构建足够具体规则的极端情况下才使用它（例如：generic print.css）。

Answer 2

有几种方法，您可以在声明结尾使用!important：

.red {
    background-color: red !important;
}

此外，声明越具体，它就越普遍。因此table.myTable td.red {}中的任何内容都会比td.red{}中的任何内容更具普遍性。

Answer 3

这是所使用的css选择器的特殊性的问题（即选择器与给定HTML元素的匹配程度如何）。选择器越具体，其样式的优先级就越高。

有关CSS选择器特异性的深入解释，请查看此页面：CSS Specificity: Things You Should Know。

Answer 4

有一种标准方式可以赋予某种风格优先权。

td.red { background-color: red !important; }

Answer 5

!important规则会覆盖css中的特定属性。

因此，如果覆盖属性，则应始终将其与值一起使用。