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>
CSS !important 规则相关推荐
- css规则可以放在云上,CSS中!important规则的使用方法
CSS中!important规则的使用方法 发布时间:2020-06-15 10:53:11 来源:亿速云 阅读:129 作者:Leah 这期内容当中小编将会给大家带来有关CSS中!important ...
- css覆盖规则_条件 CSS
在CSS的世界中,总是有很多实验性的属性先行,正因为这些先行者在不断的探索新的特性,才让CSS越来越强大.而这些实验性的特性并没有立马得到众多浏览器的支持,为了能让这些实验性特性能在部分支持的浏览器上 ...
- CSS - 语法规则
CSS - 语法规则 一.At-rule 一种以@开头的声明语句,以分号;结尾.语法规则为: @IDENTIFIER (RULE); . At-rule主要用作表示CSS的行为,参考: https:/ ...
- css !important用法以及CSS样式使用优先级判断
之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...
- 深入浅出解析CSS优先级规则
最近,小莫公司的java同事老是过来问他们写了的样式为什么不生效,秉承着同事之间互相帮助的原则不厌其烦地一遍一遍的解释.最后还是觉得还是应该把自己对于css优先级的经验整理出来,供大家学习交流. 概念 ...
- CSS !important的作用
原文地址:http://blog.sina.com.cn/s/blog_7f5bde5c01013gut.html css !important在css样式中主要是为了实现css代码的优先级别,主要写 ...
- web标准化设计:常用的CSS命名规则
常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左 ...
- 常用的CSS命名规则
网页设计中常用的CSS命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wra ...
- 网页制作中规范使用DIV+CSS命名规则(转)
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则内容如下: 页头:header 如:#header{属性:属性值;}或.h ...
最新文章
- Linux磁盘占用100%解决方法
- MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)的理解(即c++参数初始)
- 使用debug工具修改寄存器中的值
- ArcGIS实验教程——实验三:矢量数据采集与编辑(矢量化)
- ios wkweb设置图片_iOS wkwebview和 uiwebview 内容图片自适应大小
- 远程linux服务器中安装jupyter通过本地浏览器访问使用
- SQLPro Studio for Mac(数据库管理器)2022.14
- Project Aposs
- c语言怎么把数字倒过来_c语言中如何实现输入一个整数实现倒序输出
- 51单片机外围模块——DS1302时钟模块
- mysql update 子表,mysql update 子查询锁表问题
- 打包2阶段-使用reshacker修改打包信息
- neo4j学习总结--第三课 Cypher(CQL)命令一
- spark Kafka 线程安全问题
- spring基础概述
- 想配个电脑玩魔兽世界9.0,要什么配置,大概多少钱?
- EXT前端数据传不到后台
- win10+Docker Toolbox+mysql
- 2021年电赛E题解析数字模拟信号混合传输收发机(详细介绍)
- 高校网络营销课程大改迫在眉睫