CSS——！important

最新推荐文章于 2025-06-29 09:08:53 发布

原创最新推荐文章于 2025-06-29 09:08:53 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #important属性

HTML与CSS3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS中选择器的优先级规则，包括ID、类、元素选择器的权重对比，以及如何使用!important来提高样式的优先级。探讨了在特定场景下使用!important的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS的选择器是有权重的，当不同选择器的样式设置有冲突时，会采用权重高的选择器设置样式。权重（即优先级）的规则如下，权重越高，优先级越高，!important是CSS1就定义的语法，作用是提高指定样式的应用优先权。
语法格式：{cssRule !important}，即写在定义的最后面，例如：box{color:red !important}声明了!important的样式，具有最高的优先级，此篇博客主要说一下选择器优先级以及何时用！important

选择器优先级：

（1）ID>class>元素选择器

（2）结果较大的优先级较高；

（3）结果相同，则后定义的优先级较高

（4）创作者的优先级高于浏览者，网页编写者设置的CSS样式的优先权高于浏览器所设置的样式。

（5）继承的CSS样式优先级低于后来指定的CSS样式

（6）若样式值中含有!important，则该值优先级最高

何时用：

A) 一种情况

你的网站上有一个设定了全站样式的CSS文件，同时你（或是你同事）写了一些效果通常都是很差的行内样式（行内样式的优先级是最高的）。在这种情况下，你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。

B) 另一种情况

    #someElement p {  
        color: blue;  
    }  
      
    p.awesome {  
        color: red;  
    }

在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用!important，第一条规则永远比第二条的优先级更高。

总结：

通过此小知识点有收获了很多，虽然可以用此属性将级别设置到最高，但也不能乱用