CSS中!important规则的使用方法

发布时间：2020-06-15 10:53:11

来源：亿速云

阅读：129

作者：Leah

这期内容当中小编将会给大家带来有关CSS中!important规则的使用方法，以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

!important规则是什么？怎么用？

!important是CSS的一个规则，用于提高指定CSS样式规则的应用优先权；它被添加到CSS值的末尾以赋予它更多权重。

在CSS中，样式规则以级联方式应用于元素。下面这个列表中越靠前的权重越小：

●　浏览器样式：是Web浏览器声明的默认样式。

●　用户声明的样式：是用户使用浏览器选项设置或通过开发人员调试工具修改的自定义样式。

●　开发中声明的样式：是网站开发人员在CSS样式表中声明的样式。

●　具有!important规则的开发者声明样式。

●　具有!important规则的用户样式。

!important规则的使用示例：

亿速云(php.cn)

#container{

width: 450px;

height: 200px;

font-size: 25px;

}

#example{

color:red !important;

}

#container #example{

color:pink;

}

效果图：

示例说明：

在这个例子中，我们首先有了一个包含！important规则的样式，定义一个元素(#example)的文本颜色为红色(red)。然后我们有有另一个样式来使这个元素(#example)的文本颜色变为粉色(pink)。由于！important声明，因此元素(#example)的文本颜色现在是红色而不是粉色。如果我们没有使用！important，那么颜色将是粉色的。

什么时候用!important规则？

除非绝对必要，否则不应使用!important规则；使用!important规则会打破了样式表的自然级联效果，使得代码难以维护。但是，在某些情况下你必须使用！important：

1、在测试和调试网站时，!important规则是非常有用的。

如果我们的代码中存在一些CSS问题，并且希望确保应用特定的样式，则可以使用!important规则在网站上临时修复问题，直到找到更好的方法(可能需要一些时间) 。

2、输出样式表

!important规则也可用于输出样式表，以确保应用样式而不被其他任何内容覆盖。

结论

使用!important对于性能并没有什么负面影响；但是从可维护性角度考虑，除非绝对必要，应尽可能的避免使用!important规则，它应该只在特殊情况下使用。

以上便是CSS中!important规则的使用方法，虽然从篇幅上看很复杂，但是示例代码非常详细且容易理解，如果想了解更多相关内容，请关注亿速云行业资讯。