一、css的优先级
当对同一个元素设置相同的多个声明时,会按照优先级的高低选择应用哪种声明。
<style> #id{ color:red; } p{ color:blue; } </style> <div id="te">
<!-- p元素内的颜色设置为black,因为对p元素的设置,该段代码中行内样式的优先级最高 --!> <p id="id" style="color:black;"></p> </div>
二、优先级的计算方式——权重
1、权重计算的基础
内联样式:1000
id选择器:0100
类、伪类、属性选择器:0010
元素、伪元素选择器:0001
通配符:0000
2、比较规则
a、1,0,0,0 > 0,99,99,99
b、内部样式和外部样式优先级相同
c、权重相同的情况下,后写的会覆盖先写的样式
d、使用后代选择器和子类选择器,则需要把某个元素所有的修饰权值相加,即修饰的越精确,权值越高,如:
.class p[type="text"]{color:#000;}/*权值:0021*/,
该样式中,关于p元素的权值为,一个类选择器0010,一个元素选择器0001,一个属性选择器0010,最终结果0021。
<div id="te" class="cte"> <div>div</div> <p type="text">345</p> <p id="id">123</p> <p class="class">666</p> <p text="text">777</p> <p style="color=red;"></p><!-- 权值:1000 --!> </div> *{color:green;}/*权值:0000*/ p{color:#00f;}/*权值:0001*/ div p{color:orange;}/*权值:0002*/ .class{color:gray;}/*权值:0010*/ .class p[type="text"]{color:#000;}/*权值:0021*/ #id{color:red;}/*权值:0100*/ div #id{color:red;}/*权值:0101*/
三、特殊的优先级
!important,它没有权重,但是加上这个标签后,该声明就是最高优先级,大于内联样式。
如果在某个声明中加了!important,则该页面中无论后面加了其他什么样的样式,生效的只有这个。
<style> *{ color:green!important; } </style>