logo标签列表

覆盖CSS样式

css
9

我正在定义一些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>

我认为"red"类会使表头的背景变成红色，而不是黑色。但实际情况并非如此。要想让这个类覆盖原本的样式，必须在myTable类内部进行定义，像这样：

td.red { background-color: red; }

我是否漏掉了什么，还有其他方法可以做到这一点，以便我可以具有更易于重写的默认样式？

1
我从未见过这种嵌套方式的CSS - 它是否合法？ - n8wrl
@n8wrl：哎呀，忘记改了。它是用Sass编写的。 - Zachary Wright
5个回答
16

理念是样式的使用取决于两个因素：选择器的具体程度以及规则的位置（后面的规则会覆盖前面的规则）。例如：

p {
  background-color: red;
}

p {
  background-color: blue;
}

段落将会是蓝色。另一个例子：

body p {
  background-color: red;
}

p {
  background-color: blue;
}

由于“body p”更加具体，所以段落将变为红色。

编辑：还要尽量避免使用! important。虽然它被支持，但其副作用是您永远无法覆盖它。因此，仅在极端情况下使用它，即您无法知道如何构建足够特定的规则时（例如：通用的 print.css）。

8

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

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

此外，声明越具体，就会更普遍。因此，table.myTable td.red {}中的任何内容都比td.red{}中的任何内容更具有普遍性。
4
这完全是与使用的CSS选择器的特定性有关（即选择器如何精确地匹配任何给定的HTML元素）。选择器越具体，其样式的优先级就越高。
要深入了解CSS选择器特定性，请查看此页面：CSS Specificity: Things You Should Know。
2

有一种标准的方法可以提高某些样式的优先级。

td.red { background-color: red !important; }
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接