分类：web前端时间： 2016年3月13日
在PHP程序员雷雪松的博客前面的文章已经详细的介绍了CSS选择器和CSS常用的属性和值。下面再讲解一下CSS选择器的优先级。 什么叫CSS选择器优先级呢？简单的讲就是浏览器通过CSS选择器组成的匹配规则判断定义的多条CSS指令优先级，决定最忠元素显示的属性值。那下面就具体的看看关于CSS选择器优先级的规则。
1、通过CSS选择器文件引入的方式。
（外部样式）External style sheet
2、CSSS选择器的优先权，
立即学习“前端免费学习笔记（深入）”；
a. 内联样式表的权值最高1000
b. ID 选择器的权值为100
c. Class 类选择器或者属性选择符或者伪类的权值为10
d. HTML标签选择器或者伪元素选择符的权值为1
e.全局选择符*权值为0
3、!important 规则通常拥有最高级别的规则，同样的CSS选择优先级后面的覆盖前面，自定义的CSS样式优先级大于CSS继承的和浏览器默认CSS的优先级。
| 选择器 | 计算结果 |
|---|---|
| * { } | 0 |
| p { } | 1 (HTML标签选择器) |
| li:first-line { } | 2 (HTML标签选择器,伪元素选择器) |
| div span { } | 2 (2个HTML标签选择器) |
| ul ol+li { } | 3 (3个HTML标签选择器) |
| h1 + *[rel=up] { } | 11 (HTML标签选择器，属性选择器) |
| dl dt.red { } | 13 (一个CLASS类选择器,3个HTML标签选择器) |
| h2.red.level { } | 21 (两个CLASS类选择器,HTML标签选择器) |
| style=”” | 10,0,0 (行内样式) |
| #page | 100 (ID选择器) |
| body #main .left p { } | 112 (两个HTML标签选择器,ID选择器, CLASS选择器类) |
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
143
收藏
