如何覆盖 CSS !important

有时候，我们需要修改某个CSS样式，但是直接修改却不生效。这时候，我们可以考虑使用!important来覆盖原有的样式。

什么是!important?

!important是一个CSS属性值，用于覆盖应用于一个元素上的所有普通CSS规则。可以在属性值后加上!important来明确表示这条规则有更高的优先级。

如何使用!important?

在CSS的某个属性值后面，加上!important即可，示例如下：

.color {
  color: red !important;
}

注意事项

• 用!important来覆盖某个样式之前，应该先检查一下是否有比该样式更高优先级的样式，否则可能会造成样式的紊乱。

• 不建议在所有样式中都使用!important，这样容易让样式变得混乱不堪。

• 在CSS中，!important是有优先级的，如果有多个样式同时使用了!important，那么就会按照CSS优先级的规则来确定最终的样式。

• 如果需要覆盖多个样式，可以将最终的样式放在CSS文件的最底部。

示例

假设有如下CSS代码：

h1 {
  color: red;
}

.myClass {
  color: green;
}

如果我们想覆盖.myClass的颜色，可以这样写：

.myClass {
  color: blue !important;
}

这样会把.myClass的颜色修改为蓝色，覆盖掉原有的绿色。

参考链接

• MDN Web Docs

以上是如何覆盖CSS !important的介绍，希望对程序员的日常工作有所帮助。