覆盖CSS样式

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

段落将是红色的,因为"身体p"更具体.

编辑:也尽量避免使用!important.它受到支持,但副作用是你永远不能覆盖它(永远).因此,只有在你无法知道如何构建足够具体规则的极端情况下才使用它(例如:generic print.css).

Answer 2

有几种方法,你可以!important在声明的最后使用:

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

此外,声明越具体,它就越普遍.所以任何东西table.myTable td.red {}都会比任何东西都更流行 td.red{}.