<>CSS !important 规则

<>那么什么是!important呢?

CSS中的 !important 规则用于向属性/值添加比正常值更重要的内容。

事实上,如果你用 !important 规则,它将覆盖该元素上该特定属性的所有以前的样式设置规则!

让我们看一个例子:#CSS !important 规则
<!DOCTYPE html> <html> <head> <style> #myid { background-color: blue; }
.myclass { background-color: gray; } p { background-color: red !important; }
</style> </head> <body> <p>这是段落里面的一些文本。</p> <p class="myclass">这是段落里面的一些文本。</p>
<p id="myid">这是段落里面的一些文本。</p> </body> </html>
<>!important 的重要性

更改一个!important规则样式的唯一方法是包括另一个在源代码中具有相同(或更高)特定性的声明的!important规则。

这个时候问题就来了!这样做会使得CSS代码很混乱,调试也很困难,特别是当你有一个大样式表的时候!

这里我们创建了一个简单的示例。当您查看 CSS 源代码时,不太清楚哪个颜色被认为是最重要的:
<!DOCTYPE html> <html> <head> <style> #myid { background-color: blue
!important; } .myclass { background-color: gray !important; } p {
background-color: red !important; } </style> </head> <body> <p>这是段落里面的一些文本。</p>
<p class="myclass">这是段落里面的一些文本。</p> <p id="myid">这是段落里面的一些文本。</p> </body>
</html>
<>那么!important的使用场景有哪些呢?

<>覆盖内联样式

内联样式的优先级权重很高,如果不便于改动源码中的样式,那么选用 !important
去覆盖掉原来的内联样式是合适的。因为此时,除了改动源码,还有什么合适的办法可以改动内联样式?似乎没有了吧。然后就是关于“不便改动源码”的理解,例如第三方插件的内联样式,这确实不便于改动。如果是自己开发中的项目,那么改动源码可能比起用
!important 去覆盖更合适。对于一些老旧项目里面的内联样式,这种源码是可以动的,但如果你认为“改动源码”非常费劲,你也有一点理由去使用
!important,但不太建议。

<>覆盖优先级很高的选择器

除了内联样式,还有一种需要使用 !important
的场景,那就是样式优先级很高,权重很大的样式。优先级很高,权重很大,是啥概念呢?就是除了改源码(代码),几乎没有办法能改动了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>css-important Demo</title> <style> #main { color: red; } body #main {
color: #002afd; } html #main { color: #5dfd00; } /* 假设这份样式在第三方插件中,除了改动源码,
还有什么办法可以覆盖 html body #main{} 的样式,样式穿透已经改不动了吧 */ html body #main { color:
#2c3e50; } </style> </head> <body> <div id="main"> 这一段普通的文字 </div> </body>
</html>

技术
今日推荐
PPT
阅读数 106
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信