首先我得先说明一个误区:选择器没有优先级
问题一,那选择器没有优先级,那声明块的优先级怎末定呢?
选择器的特殊性会赋予所对应的声明块,所以如果存在多个规则对应一个元素,且存在声明冲突,则特殊性越大,越占优势。
问题二,那什么是选择器的特殊性呢?
选择器的特殊性是自身所决定的,且特殊性值表示为0,0,0,0。
问题三,那不同选择器具体的特殊性值是多少呢?
一个选择器的特殊性值如下
01,id选择器:0,1,0,0
02,类选择器,属性选择器,伪类:0,0,1,0
03,标签选择器,伪元素选择器:0,0,0,1
04,通配符:0,0,0,0
05,结合符【’.’,’~’,’+’,’>’…】没有特殊性
06,内联声明:1,0,0,0
07,继承没有特殊性
注意点:特殊性值可以累加,但是没有进位一说【举个例子:n个类选择器抵不过一个id选择器】
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css声明优先级</title>
<style>
*{
background: #4A86E8;
}
div {
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #000000;
}
.box.box.box.box.box.box.box.box.box.box.box.box{
background: #D0E0E3;
}
[id]{
background: pink;
}
#box {
background: #FF0000;
}
</style>
</head>
<body>
<div id="box" class="box" style="background: blueviolet;">
燃情雪
</div>
</body>
</html>
结果:
继承示例【color属性为继承属性】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css声明优先级</title>
<style>
*{
color: red;
}
div {
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
color: #000000;
}
</style>
</head>
<body>
<div id="box" class="box" style="background: blueviolet;">
<span>燃情雪</span>
</div>
</body>
</html>
结果:
ps:由于继承没有特殊性,所以通配符比继承更占优势
问题四,不是有个重要声明什么的吗?
重要声明
01,有时某个声明比较重要,css2.1就称之为重要重要声明。
02,重要声明必须放置在声明的最后面,分号的前面width: 200px !important;
之间只允许存在空格。
03,重要声明没有特殊性
04,浏览器对元素的渲染会把重要声明分一组,非重要声明分一组,且重要声明比非重要声明更加具有优势。
问题五,没了吗?
不不不,还有来源。
来源
css样式的来源大致有三种
创作人员【我们】
读者【用户】
用户代理【浏览器】
权重
读者重要声明
创作者重要声明
创作者非重要声明
读者非重要声明
用户代理声明
读者重要声明【IE里面的internet选项】
用户代理
问题六,怎末具体曾叠呢?
01,先按来源
02,再按选择器的特殊性
03,最终按顺序【在上述是相同的情况下,越后的越占优势;比如:类选择器和属性选择器】
菜鸟爬行中…