CSS的!important属性修改权重

最近在做项目中发现很多CSS代码里面都使用!important去覆盖原有高优先级的样式。按照常理来说，越是灵活的东西，需要做的工作就会更多所以就写一篇博客梳理下!important属性。

1.定义及语法

语法格式：{ cssRule !importan}，例如：box{color:red !important;}。

作用：提高指定样式规则的应用优先权（优先级）在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。

2.浏览器识别

IE7及IE7+,Firefox,chrome等浏览器下，已经可以识别 !important属性，但是IE6.0、IE6及更早浏览器下仍然不能完全识别。!important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为! important优先级较高，否则当含! important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为! important较低!

3.由于!important的样式属性和覆盖它的样式属性单独使用时需要不在一个{}里所以就有下面情况：

首先，先看下面一段代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title>
</head>
<style type="text/css">
.testClass{ color:blue !important;
}
</style>
<body><div class="testClass" style="color:red;">测试Css中的Important</div>
</body>
</html>

虽然元素的style中有testClass类的定义，但是在上面的css定义中的用!important限定的定义却是优先级最高的，无论是在ie6-10或者Firefox和Chrome表现都是一致的，都显示蓝色。

这种情况也同时可以说明ie6是可以识别!important的，但是有一种情况IE6是识别不出来的，但是 IE7及IE7+,Firefox,chrome等浏览器是可以识别的。

.testClass{ color:blue !important;color:red;
}

这样情况下!important属性，在ie6下展示的时候会显示成红色。

当然，也可以通过以下方式来让ie6识别：

.testClass{color:blue !important;
}
.testClass{color:red;
}

通过以上方式也是可以让ie6显示成蓝色的。

以上实例说明使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug，所以我们在使用!important属性的时候，需要注意书写方式。

4.总结一下

1.!important会修改当前对应元素的当前css属性和值得权重

2.!important指定的属性权重比class选择器，ID选择器，内联样式的权重都高。

3.!important只对当前元素当前属性权重有影响，对子元素权重没影响

4.如果在在不懂选择器中，相同属性和值都指定了!important，选择器权重高的属性起作用
5.注意书写方式

CSS的!important属性修改权重相关推荐

css 修改文字基准线_HTML4/HTML5 用CSS或style属性修改 hr 实线虚线点线双实线样式 ... ......
HTML4/HTML5 用CSS或style属性修改实线虚线点线双实线样式 HTML 是 Hyper Text Markup Language 的英文缩写,中文称为超文本标记语言.HTML 是 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
【CSS】CSS选择器优先级及!important属性
CSS的选择器是有权重的,当不同选择器的样式设置有冲突时,会采用权重高的选择器设置样式.权重(即优先级)的规则如下,权重越高,优先级越高: 同一个元素可以使用多个规则来指定它的同一样式(比如字体颜色) ...
CSS中的!important属性用法
由于IE并不严格执行W3C标准, 而又几乎垄断了浏览器市场. 所以作为一名合格的网站制作人员, 必须要针对不同的浏览器进行微调. 实现不同浏览器之间兼容的方法有很多, 比如利用JS探测用户的浏览器类型 ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
css规则可以放在云上,CSS中!important规则的使用方法
CSS中!important规则的使用方法发布时间:2020-06-15 10:53:11 来源:亿速云阅读:129 作者:Leah 这期内容当中小编将会给大家带来有关CSS中!important ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
CSS的浮动属性，3面直接拿到offer
02 目录下面是这篇文章的目录结构,一般比较简单的问题我就一笔带过了,主要是分享一下比较有难度的知识点,答案来自网上,如果有版权问题我会删除.还有本文只是给出一个大概的知识点,如果想要深入学习还要靠 ...
CSS样式基本属性（标签权重对比）
继承有一些属性给父类或祖先元素设置后,其后代元素也会继承该样式,这就叫做继承性. 继承性是从当前元素开始,一直到最小的元素. 后代元素能够继承来自祖先元素的文字样式.这些属性包括:color,tex ...

CSS的!important属性修改权重

CSS的!important属性修改权重相关推荐

最新文章

热门文章