CSS优先级
admin
2024-02-07 09:55:26
一、任务目标
理解CSS优先级
掌握CSS优先级的应用
二、任务背景
当创建的CSS样式表越来越多、越来越复杂的时候，一个元素的样式可能受到多个CSS样式表的影响，到底这个元素显示的是哪个样式表的样式呢？通过CSS优先级可以帮助我们得出结论。
三、任务内容
1、CSS优先级
浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值
CSS的优先级如下
-
【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器 、伪元素选择器】
通配符选择器【*】和关系选择符【+（相邻选择符）、>（子代选择符）、~（兄弟选择符）、" "（后代选择符）等】对优先级没有影响
在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级
| 选择器 | 权重 |
|---|---|
| 内联样式 | 1000 |
| ID选择器 | 100 |
| 类选择器、属性选择器、伪类选择器 | 10 |
| 标签选择器、伪元素选择器 | 1 |
| 相邻选择符、子代选择符、兄弟选择符、后代选择符 | 0 |
2、选择器权重计算
选择器的权重可以相加
#header .nav li { list-style: none; }
该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111
对于同一个元素的两种选择器均声明了同一个属性情况
-
权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性
-
权重不同时，权重大的选择器生效
3、!important规则
当你在一个样式声明中使用
!important规则时，这个样式将覆盖其他的任何声明!important规则与优先级无关，但是会直接影响样式的最终显示结果
相关内容
热门资讯
国资央企市值管理步入价值创造新...
转自：中国证券报·中证网 日前召开的中央企业负责人会议明确，2026年要加强上市公司质量和市值管理...
人大常委会丨每年9月第三周为国...
转自：新华网 新华社北京12月27日电（记者魏冠宇）十四届全国人大常委会第十九次会议12月27日表...
国家数据局：鼓励投早、投小、投...
格隆汇12月27日｜国家数据局关于加强数据科技创新的实施意见提到，加大财税金融支持力度。加强政府投资...
科学有答案 创新无止境（院士讲...
来源:人民日报“长征五号乙”运载火箭。资料图片回望2025，中国科技创新在广袤天地间书写奋进篇章。科...
国家数据局：到2027年 建成...
人民财讯12月27日电，国家数据局发布关于加强数据科技创新的实施意见，意见提出，到2027年，建成一...