我正在定义一些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; }
我在这里遗漏了什么,有没有其他方法可以做到这一点,以便我可以有更容易被覆盖的默认样式？
解决方法
想法是使用哪种样式取决于两件事：选择器的具体程度,规则的位置(最新规则获胜).例：
p {
background-color: red;
}
p {
background-color: blue;
}
段落将是蓝色的.另一个例子：
body p {
background-color: red;
}
p {
background-color: blue;
}
段落将是红色的,因为“body p”更具体.
编辑：也尽量避免使用！important.它受到支持,但副作用是你永远不能覆盖它(永远).因此,只有在你无法知道如何构建足够具体规则的极端情况下才使用它(例如：通用print.css).
