CSS选择器权重计算与优先级

最新推荐文章于 2024-08-09 11:34:51 发布

m0_51734506

最新推荐文章于 2024-08-09 11:34:51 发布

阅读量2.5k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/m0_51734506/article/details/111145406

版权

CSS选择器的优先级由权重决定，分为六个等级。内联样式、ID选择器、类选择器等各具权重，!important具有最高优先级。同等级时，后定义的样式优先，权重计算涉及每个等级的计数。了解这些规则有助于解决样式覆盖问题。

摘要由CSDN通过智能技术生成

CSS选择器权重计算与优先级

选择器有优先级，可以通过权重来计算优先级。

一：优先级
等级划分：
第一优先级：css属性+!important是一种强制改变优先级的方法，它会覆盖页面内任何位置定义的元素样式，它拥有最高优先级。
第二优先级：在html中给元素标签加style，即内联样式。
第三优先级：由id选择器来定义。例如，#id{ }会覆盖.classname{ }
第四优先级：由class选择器、属性选择器、伪类选择器定义。如.classname{ }会覆盖div{ }
第五优先级：由元素选择器、伪元素选择器定义。如div{ }覆盖*{ }
第六优先级：通用选择器，如*{ }
css属性+!important>内联样式>ID选择器（#id）>类选择器（.class）=伪类选择器（：hover等）=属性选择器[type]>元素选择器（p等）=伪元素选择器>通用选择器>继承的样式
优先级规则：
同等等级情况下：
1.优先级高的优先。
2.优先级相同时，则采用就近原则，选择后定义的样式。
3.属性后面加 !important 时，绝对优先。
4.继承得来的属性，其优先级最低;
等级不同的情况下，优先级高的优先！！