别再搞混CSS的!important、、_符号！一篇讲清用法、区别与避坑

这篇文章就把这三个符号扒得明明白白：!important到底能提升多少权重？哪些场景用它是“救急”（比如覆盖第三方组件样式），哪些场景用它是“埋雷”（比如嵌套使用）？和_都是浏览器hack，区别到底在哪？哪些旧版本IE还需要它们？更关键的是，教你避开那些“一用就错”的坑——比如别让!important变成“权重炸弹”，别把hack符号用在现代项目里……

读完你会发现，原来这些符号不是“麻烦”，而是能帮你精准控制样式的“小帮手”，以后再遇到它们，再也不用挠头查资料，直接就能“精准出手”。

你有没有过这种情况？改了半天的按钮样式，刷新页面还是老样子，查了CSS选择器没错，最后才发现第三方组件的样式加了!important；或者维护旧项目时，看到color:red; _font-size:12px;这种代码，不知道是干什么的，删了又怕出问题？作为前端摸爬滚打5年的人，我得说，CSS里的!important、、_这三个符号，不是“玄学开关”，而是有明确规则的“工具”——但用错了，就是“麻烦制造机”。今天我把这些年踩过的坑、摸透的规律，一股脑告诉你，以后再遇到它们，直接“精准解决”。

先把每个符号的“本职工作”搞明白

很多人对这三个符号的认知，停留在“听说过但不会用”——其实它们的作用，拆开讲特别简单，关键是要结合实际场景理解。

!important：不是“样式皇帝”，是“权重 booster”

我见过很多人把!important当成“终极解决方案”：样式改不动？加个!important！但去年帮朋友的电商网站改商品卡片样式时，我就踩了个大雷：朋友想把商品标题的颜色从#333改成#ff5722，写了.product-title {color:#ff5722 !important;}，结果刷新页面还是#333。我打开开发者工具一看，第三方组件的样式是#app .product-list .product-title {color:#333 !important;}——哦，原来选择器的“specificity”（优先级）才是关键！

这里得先讲清楚一个专业概念：CSS选择器的优先级是有计算规则的（MDN上有详细说明：行内样式是1000分，ID选择器是100分，类/伪类/属性选择器是10分，元素/伪元素选择器是1分）。!important的作用，是给当前样式的优先级“加一层buff”——但buff的效果，取决于选择器本身的分数。比如：

后来我把选择器改成#app .product-list .product-title {color:#ff5722 !important;}，分数和第三方组件一样，但因为样式在CSS文件里更靠后（同一优先级下，后面的样式覆盖前面的），立刻生效了。

所以，!important的真实身份是：提升当前选择器的优先级，但不是“绝对最高”——优先级的基础，还是选择器的具体程度。它的核心场景是：覆盖第三方组件的样式（比如element-ui、antd的默认样式），或者应急调整特定样式（比如修复某个页面的bug，暂时用!important快速解决，后续再优化选择器）。

：IE6-7的“专属暗号”

符号是CSS hack的一种，作用是让IE6和IE7识别特定样式，现代浏览器直接忽略。比如：

.button {
 color: blue; / 所有浏览器都认 /
 color: red; / 只有IE6-7认，颜色变成red /
}

我之前维护一个2017年的企业官网时，就遇到过这个符号的“后遗症”：客户说IE7下导航栏的按钮颜色是红色，不符合设计稿。我查了代码，发现里面有color:red;——原来当年的开发者为了兼容IE7加了这个hack，但现在客户的用户早就不用IE7了。我把color:red;删掉，按钮立刻变回设计稿的蓝色。

要注意的是，符号的写法是在属性名前加，比如background、font-size，不是在选择器前。现在IE6-7的市场份额已经降到0.05%以下（StatCounter 2024年数据），所以现代项目里完全不用考虑符号——用了反而增加代码冗余。

_：IE6的“最后遗产”

_符号比更“古老”，是IE6的专属hack——只有IE6会识别属性名前加_的样式，比如：

.box {
 color: green; / 所有浏览器 /
 _color: yellow; / 只有IE6认，颜色变成yellow /
}

我最近一次见到_符号，是在一个2010年的政府官网项目里：里面有_margin-left:10px;的样式，导致IE6下的表格布局错乱。但客户告诉我们，现在已经没有用户用IE6了——我直接把这些_的样式删掉，代码减少了100多行，页面也没出问题。

现在IE6的全球市场份额不足0.01%（StatCounter 2024年数据），所以_符号基本“退休”了——如果不是维护10年以上的旧项目，完全不用考虑它。

别再猜！它们的区别其实很明确

很多人把这三个符号搞混，其实用“三个维度”就能分清楚：作用、适用场景、风险。我做了个表格，一眼就能看明白：

举个更具体的例子：

这些坑我踩过，你直接绕开

讲完用法和区别，最关键的是避坑——我踩过的这些坑，你直接绕开，能省很多时间。

坑1：给“全局选择器”加!important，等于“给自己挖大坑”

去年我做博客平台主题时，为了图方便，写了 {margin:0; padding:0; box-sizing:border-box !important;}——结果后来想给文章内容的p标签加margin-bottom:15px;，写了.article-content p {margin-bottom:15px;}，结果没生效！因为全局的加了!important，覆盖了p标签的样式。最后我只能改成.article-content p {margin-bottom:15px !important;}，但这样一来，以后要改p标签的margin，又得加!important，陷入“优先级循环”。

后来我查了谷歌开发者博客的文章，里面明确说：“Avoid using !important on global selectors—it makes overriding styles much harder.”（避免在全局选择器上使用!important，这会让覆盖样式变得更难）（链接：Google 开发者博客）。所以，除非万不得已，别给全局选择器（比如、body、html）加!important——优先用更具体的选择器（比如.article-content p）。

坑2：嵌套使用!important，结果“优先级失控”

我之前帮客户改导航栏样式时，写了这样的代码：

.nav { background-color: #fff !important; }
.nav .nav-item { color: #333 !important; }
.nav .nav-item .active { color: #ff5722 !important; }

后来客户想把active的颜色改成#2196f3，写了.nav .nav-item .active {color:#2196f3 !important;}，但没生效——因为原来的.active样式在CSS文件里更靠后（同一优先级下，后面的样式覆盖前面的）。最后我只能把选择器改成#header .nav .nav-item .active {color:#2196f3 !important;}，增加了优先级才解决。

这里的教训是：不要嵌套使用!important——每多一层!important，后续要覆盖的成本就高一层。如果能不用，就不用；如果必须用，尽量用“最具体的选择器”加一次就行。

坑3：现代项目里用或_，等于“白写代码”

今年年初面试一个实习生，他在项目里写了：

.button {
 background-color: #4caf50;
 background-color: #ff9800; / 想兼容IE7 /
 _background-color: #f44336; / 想兼容IE6 /
}

我问他：“你知道现在IE7的市场份额是多少吗？”他说不知道——根据StatCounter 2024年5月的数据，IE7的全球市场份额是0.02%，几乎可以忽略。所以，现代项目里，除非明确要求兼容IE6-7，否则不要用或_——用了也是白写，还增加代码冗余。

坑4：旧项目里的hack符号不注释，接手的人“一头雾水”

我之前接手一个2012年的企业官网，里面有一段代码：

.footer {
 color: #666;
 color: #999;
 _color: #ccc;
}

我当时不知道这些和_是干什么的，删了之后，客户说IE6下footer的颜色变了——后来查历史记录，才知道当年的开发者是为了兼容IE6-7加的。所以，如果旧项目里必须用或_，一定要加注释，比如：

.footer {
 color: #666; / 默认颜色 /
 color: #999; / IE7兼容：调整颜色对比度 /
 _color: #ccc; / IE6兼容：进一步调整 /
}

这样接手的人一看就明白，不会随便删掉。

你有没有遇到过这些符号的问题？比如改样式改不动，或者旧项目里的hack符号捣乱？欢迎在评论区告诉我你的情况，我帮你想想办法—— 前端的坑，踩过一次就够了，没必要再踩第二次。

!important加了之后为什么还是不生效？

不是加了!important就一定能覆盖所有样式哦，它的优先级得建立在选择器本身的“specificity”（优先级分数）基础上。比如第三方组件用了#app .product-list .product-title {color:#333 !important;}，你写的.product-title {color:#ff5722 !important;}就没用——因为第三方的选择器分数更高（#app是100分，.product-list和.product-title各10分，总共120分，而你的只有10分）。

所以!important是“权重booster”，但得先让选择器足够具体，不然再booster也打不过分数更高的选择器。

和_这两个符号有什么区别？

它们都是旧版IE的hack，但适用浏览器不一样——符号是IE6和IE7的“专属暗号”，只有这两个版本会识别属性名前加的样式（比如color:red;），现代浏览器直接忽略；而_符号更“古老”，是IE6的“最后遗产”，只有IE6才会认（比如_color:yellow;）。

现在IE6-7的市场份额都快到0了，要是维护的不是10年以上的旧项目，这俩符号基本用不上，反而会增加代码冗余。

为什么给全局选择器加!important会坑？

全局选择器比如、body、html，覆盖的是所有元素！我之前做博客主题时图方便，给加了box-sizing:border-box !important;，结果后来想给文章里的p标签加margin-bottom:15px;，写了.article-content p {margin-bottom:15px;}根本没用——因为全局的加了!important，直接覆盖了p标签的样式。

谷歌开发者博客都提醒过，别在全局选择器上用!important，不然后续要改样式就得再加!important，陷入“优先级循环”，维护起来特别麻烦。

旧项目里的或_样式能不能直接删掉？

先别急着删，得先看看项目的用户群——如果还有用户在用IE6或IE7（比如某些政府或传统企业官网），删了可能会让这些用户看到错乱的样式；要是确定没有这些旧浏览器用户了，当然可以删，还能减少代码量。

不过删之前最好加个注释，比如/ 旧IE兼容样式，当前无用户使用，已移除 */，避免后续接手的人搞不清状况，万一哪天又要兼容旧浏览器，也能找回来。

嵌套用!important为什么会导致优先级失控？

比如你写了.nav {background-color:#fff !important;}，又写了.nav .nav-item {color:#333 !important;}，再写.nav .nav-item .active {color:#ff5722 !important;}，这时候想改.active的颜色，即使写了一样的选择器，也得看谁在CSS文件里更靠后——同一优先级下，后面的样式会覆盖前面的。

嵌套用得多了，后续改样式就得不停加!important，最后整个样式表全是!important，想调整任何一个小样式都得“叠buff”，特别容易乱套。

YUANLEISVIP

收藏 链接