详解CSS选择器的类型以及优先级

目录

 

一、CSS选择器的分类

1、标签名选择器   

2、类选择器           

3、ID选择器

4、后代选择器（类选择器的后代选择器）

5、群组选择器

二、选择器的优先级 　　

三、总结

---

一、CSS选择器的分类

1、标签名选择器   

div{ color：red;}   

即页面中的各个标签名的css样式

2、类选择器           

.divClass{ color:red;}  

即定义的每个标签的class 中的css样式 　　

3、ID选择器

#myDiv {color:Red;}

即页面中的标签的id 　　

4、后代选择器（类选择器的后代选择器）

.divClass span { color:Red;}

即多个选择器以逗号的格式分隔 命名找到准确的标签

5、群组选择器

div,span,img {color:Red}

即具有相同样式的标签分组显示 　　

二、选择器的优先级 　　

1、最高优先级是 (直接在标签中的设置样式，假设级别为1000) <div style="color:Red;"></div> 　　

2、次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;} 　　

3、其次优先级是（类选择器，假设级别为10） .divClass{color:Red;} 　　

4、最后优先级是 （标签选择器，假设级别是 1） div{color:Red;} 　　

5、后代选择器的优先级主要是依据前四种选择器进行计算所得，比如 .divClass span { color:Red;} 优先级别就是：10+1=11

三、总结

在进行CSS选择器优先级排序的时候，主要依据以下顺序进行：

style（行内样式：1000） > id（ID选择器：100） > class（class选择器：10） > 标签选择器（假设级别为1）

例如以下选择器的优先级从签到后依次为：

style（1000）>#list #box（100+100=200）> #list .box div span（100+10+1+1=112） > .list .box p（10+10+1=21）> .list span（10+1=11）> p:last-child（1）

 

参考文献：https://www.w3cschool.cn/css3/question-10231619.html