CSS !important不会覆盖外部样式表中的样式

在本文中，我们将介绍CSS中的一个特殊属性！important的使用以及它在覆盖外部样式表中的样式时的行为。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是!important？

!important是CSS中的一个关键字，用于给样式属性添加一个高优先级，使其优先级高于其他样式规则。它可以被应用于样式表的任何规则中的属性声明。当在一个属性声明中使用!important时，该声明将覆盖其他普通声明，无论其出现在样式表中的位置如何。

有时候，我们可能会遇到一个情况，即需要强制覆盖外部样式表中的某个样式规则。例如，我们可能需要在一个导航栏中使用自定义字体大小，而不是外部样式表中的缺省字体大小。这时，我们可以通过使用!important来实现这个需求。

要使用!important，只需在属性值后添加!important关键字。例如，如果我们想将字体颜色设置为红色，并且这个样式必须优先于其他样式表中的样式规则，可以这样写：

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

在上述代码中，我们给color属性添加了!important，这样即使在样式表中的其他地方有类似的颜色设置，也会被这个样式声明覆盖。

!important的使用应该避免滥用，因为它可能导致样式混乱和不可预测的行为。它应该被视为一种最后的手段，只在必要时使用。
!important只能覆盖样式声明中的该属性值，而不能覆盖整个样式规则。这意味着如果两个样式规则都具有!important，并且应用于同一个元素，那么具有较高优先级的样式规则将覆盖具有较低优先级的样式规则。

为了更好地理解!important的用处和行为，让我们来看几个例子。

假设我们有一个外部样式表定义了一个class为.title的样式规则，其中设置了字体大小为16像素：

.title {
  font-size: 16px;
}

现在，假设在某个页面中，我们想要.title元素的字体大小变成20像素。我们可以在内联样式中使用!important来实现这个效果：

<h1 class="title" style="font-size: 20px !important;">标题</h1>

在这个例子中，内联样式中的!important会覆盖外部样式表中的样式规则，从而使标题的字体大小变成20像素。

假设我们正在使用一个CSS库，该库为链接定义了边框样式：

a {
  border: 1px solid blue;
}

现在，我们想要为某个特定的链接添加一个不同的边框样式，例如红色边框。我们可以使用!important来覆盖CSS库中的样式规则：

<a href="#" class="custom-link">链接</a>

.custom-link {
  border: 1px solid red !important;
}

在这个例子中，我们在自定义类名的样式规则中使用了!important，使其优先级高于CSS库中的样式规则，从而为链接设置了红色边框。

虽然!important可以覆盖外部样式表中的样式规则，但它应该被谨慎使用。过度使用!important可能导致样式冲突和维护困难。在编写CSS代码时，应该优先考虑使用更具体的选择器、样式层叠和避免样式冲突的方法来控制样式。只有当其他方法不起作用时，才应该考虑使用!important。

尽管!important是CSS的一个强大特性，但我们应该根据需要使用它，并时刻牢记它的一些限制和注意事项。