js是解释性语言,一行一行地执行代码,所以如果多个选择器作用一个标签时,谁的优先级大,这个标签听谁的。如果优先级相等，那么后面的代码将覆盖前面的代码
1.首先比较id选择器和class选择器的优先级：
html代码：
<div class="class" id="id">123</div>
css代码：
.class{
font-size:20px;
color:#f00;
}
#id{
font-size:30px;
color:#00f;
}
执行结果:
出现这种结果有两种可能,第一种id选择器的优先级大于class选择器的优先级;第二种id和class选择器的优先级相同,id选择器作用效果凸显出来了,所以我们将id和class的css代码换个位置
新的css代码;
#id{
font-size:30px;
color:#00f;
}
.class{
font-size:20px;
color:#f00;
}
执行结果:
结论:id选择器的优先级大于class选择器的优先级
2.比较class选择器和标签选择器的优先级
html代码:
<div class="class">123</div>
css代码:
div{
font-size:20px;
color:#f00;
}
.class{
font-size:12px;
color:#0f0;
}
执行结果:
我们将css中的div代码块和.class代码块互换位置,执行结果不变
结论:class选择器的优先级高于标签选择器的优先级
3.比较标签选择器和通配符的优先级
html代码:
<div>123</div>
css代码:
div{
font-size:20px;
color:#000;
}
*{
font-size:30px;
color:#f00;
}
执行结果:
结论:标签选择器的优先级大于通配符的优先级
4.我们比较行间样式(style)和id(刚刚比较优先级的老大)
html代码:
<div style="font-size:30px;color:#000" id="id">
css代码:
#id{
font-size:50px;
color:#f00;
}
执行结果:
结论:行间样式的优先级大于id选择器的优先级
优先级总结:行间样式>id>class>标签>通配符(*)
其实这里有一个不用这样比较选择器优先级的css选择权重,直接看谁的权重大,谁来作用
css权重:
css选择器 权重
!important infinity(无穷大)
行间样式 1000
id 100
class/属性选择器/伪类选择器 10
标签/伪元素 1
通配符 0
注意:在数学中正无穷加一和正无穷一样大,但是在计算机中的infinity+1>infinity
1000,100,10,1,0之间的进制是256(一个工程师测出来的)
权重的用法:
html代码:
<div class="demo">123</div>
css代码:
div.class{
color:#000;
}
div[class]{
color:#f00;
}
执行结果:
123字体为红色,因为标签选择器+class选择器的权重等于标签选择器加属性选择器的权重,后面的代码覆盖前面的代码