CSS !important 规则

简介: CSS !important 规则

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>
相关文章
|
6月前
|
前端开发
CSS——@layer规则
CSS——@layer规则
89 2
CSS——@layer规则
|
5月前
|
前端开发
CSS样式规则
CSS样式规则。
60 2
|
6月前
|
前端开发 开发者
CSS样式覆盖规则详解,让你的网页更加出彩!
【8月更文挑战第23天】在Web前端开发中,理解CSS样式覆盖规则至关重要。当多个样式规则作用于同一元素时,哪些规则生效?本文通过实例解析这些规则。简单案例中,`.error`类选择器优先级高于`p`标签,文字显示红色。复杂案例涉及`.important`类与`!important`关键字,此时文字变为绿色。另外,内联样式拥有比外部样式更高的优先级。掌握这些原则有助于开发者高效管理样式。
126 0
|
6月前
|
前端开发 搜索推荐 容器
创意按钮,触手可及:CSS不规则形状效果揭秘!
创意按钮,触手可及:CSS不规则形状效果揭秘!
|
7月前
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
148 1
|
7月前
|
前端开发
css特效——Photoshop选区(动感的虚线选框,支持不规则的选框)
css特效——Photoshop选区(动感的虚线选框,支持不规则的选框)
46 1
|
8月前
|
前端开发 开发者
CSS 选择器与相关规则详解
CSS 选择器与相关规则详解
|
9月前
|
XML 前端开发 数据格式
css的主要规则
【4月更文挑战第14天】css的主要规则
54 6
|
9月前
|
XML 前端开发 数据格式
什么是CSS?CSS的基本规则是什么?
什么是CSS?CSS的基本规则是什么?
|
9月前
|
前端开发 开发者
【Web 前端】CSS 样式覆盖规则?
【4月更文挑战第22天】【Web 前端】CSS 样式覆盖规则?

热门文章

最新文章