css选择器的优先级(在末尾会写css权重)

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选择器的权重等于标签选择器加属性选择器的权重,后面的代码覆盖前面的代码