CSS选择器优先级(CSS三大特性:层叠性、继承性、优先级)
  RYmhih5S9oPP 2023年11月01日 43 0

本博文介绍CSS三大特性之一:优先级。

1 规则

(1)若选择器相同,则执行层叠性(层叠性:给相同的选择器设置相同的样式,则“后来居上”,后面设置的样式会覆盖前面设置的样式);

(2)若选择器不同,则有优先级。

2 选择器权重

常见的选择器权重如下表:

选择器 权重
继承或者*(通配符) 0,0,0,0
标签选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式(style="") 1,0,0,0
!important 无穷大

对选择器权重的说明如下:

(1)权重是由4组数字组成,没有进位

(2)比较权重大小:从左边第一个数字开始比较,直到第四个数字;

(3)继承的权重是0,如果该元素没有被直接选中,不管父元素权重多高,子元素得到的权重都是0;

(4)权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。权重叠加计算方法:将组成复合选择器的基础选择器的权重相加(4组数字分别相加),即得到新权重。

权重叠加示例:

选择器 权重 说明
div u li 0,0,0,3 3个标签选择器(0,0,0,1)
.nav ul li 0,0,1,2 1个类选择器(0,0,1,0)+2个标签选择器(0,0,0,1)
a:hover 0,0,1,1 1个标签选择器(0,0,0,1)+1个伪类选择器(0,0,1,0)
.nav a 0,0,1,1 1个类选择器(0,0,1,0)+1个标签选择器(0,0,0,1)
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  LY8MQrCFKM5K   2024年05月17日   42   0   0 Html/Css
  6KFl7ZJFjB7K   2024年04月15日   91   0   0 Html/Css
  yFRq1xYnAob9   2024年04月22日   61   0   0 Html/Css
  20HN9BpynbnX   2024年05月17日   38   0   0 Html/Css
  uCg8iP04yNRs   2024年05月08日   159   0   0 Html/Css
RYmhih5S9oPP