关注
css中使用!important优先级最高问题
原创 2016年07月28日 14:49:10 阅读 6623
我们都知道在css属性在不同的地方有不同的优先级，但是我们可以在css定义中的用!important限定的定义最高优先级。
下面我通过四种情况做个实例：
下面是实例代码代码里有对应的说明：
[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.p1{
color:blue;/*<span style="font-family:";">1</span>没加important 显示为红色 */
}
}
.p2{
color:blue;
color:red!important;/*2加上了important属性优先级高 显示为红色 */
}
.p3{
color:red!important;
color:blue;/*3但是这种情况下在ie6一下ie版本会显示为蓝色但是在其他浏览器都显示为红色 */
}
/*4为了解决ie6及一下版本的兼容 把样式分开写 important的优先级高 显示为红色 */
.p4{
color:red!important;
}
.p4{
color:blue;
}
</style>
</head>
<body>
<p class="p1">1没加important</p>
<p class="p2">2加了important属性</p>
<p class="p3">3IE6及一下版本识别不出来</p>
<p class="p4">4解决ie6及一下版本的兼容问题</p>
</body>
</html>
[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.p1{
color:blue;/*<span style="font-family:";">1</span>没加important 显示为红色 */
}
}
.p2{
color:blue;
color:red!important;/*2加上了important属性优先级高 显示为红色 */
}
.p3{
color:red!important;
color:blue;/*3但是这种情况下在ie6一下ie版本会显示为蓝色但是在其他浏览器都显示为红色 */
}
/*4为了解决ie6及一下版本的兼容 把样式分开写 important的优先级高 显示为红色 */
.p4{
color:red!important;
}
.p4{
color:blue;
}
</style>
</head>
<body>
<p class="p1">1没加important</p>
<p class="p2">2加了important属性</p>
<p class="p3">3IE6及一下版本识别不出来</p>
<p class="p4">4解决ie6及一下版本的兼容问题</p>
</body>
</html>
下面是测试结果：
在ie6显示结果
在其他浏览器及ie6以上显示
举报
bymyself11访问量 7万+ 原创 66 博主更多文章>
CSS中提升优先级属性!important的用法总结
m0_38099607 11208次阅读 2017-06-04 19:18:54
CSS 优先级和定位
baidu_36097530 476次阅读 2016-10-19 20:26:42
【CSS】CSS选择器优先级及!important属性
LZGS_4 20011次阅读 2015-02-03 10:18:40
CSS!important声明强制优先
paincupid 19750次阅读 2014-07-21 21:50:27
[css] !important 控制样式优先级
spring21st 2189次阅读 2012-08-08 14:44:50
!important和js的优先级比较
hsany330 3400次阅读 2016-06-07 11:37:28
css中使用'!important'使属性值有最高优先级
yangluo1683 285次阅读 2017-07-28 11:36:10
css !important用法以及CSS样式使用优先级判断
zth1002 3051次阅读 2015-06-11 11:52:09
关于css属性的优先级详细探索
cc2293260 935次阅读 2016-03-10 16:00:23
CSS样式优先级
mafan121 1043次阅读 2015-09-01 15:38:30
更多相关文章