CSS_三大特性下_优先级
  NxhOJKtRn6gk 2023年11月01日 98 0

CSS三大特性

1、继承性

CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com)

2、层叠性

CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com)

3、优先级

3.1基本

1特性:
不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式

2优先级公式:
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

3注意点:
1、!important写在属性值的后面,分号的前面!
2、!important不能提升继承的优先级,只要是继承优先级最低
3.、实际开发中不建议使用!important。

div{
	color:green !important;
}

3、2权重叠加计算

场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
权重叠加计算公式:(每一级之间不存在进位)

uTools_1686398765212

比较规则:
1、先比较第一级数字,如果比较出来了,之后的统统不看
2、如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
3、如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
注意点:!important如果不是继承,则权重最高,天下第一!

可以加入学习群:862369742

以上内容为学习尚硅谷视频后整理

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

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

暂无评论

推荐阅读
  LY8MQrCFKM5K   2024年05月17日   39   0   0 Html/Css
  6KFl7ZJFjB7K   2024年04月15日   90   0   0 Html/Css
  yFRq1xYnAob9   2024年04月22日   58   0   0 Html/Css
  20HN9BpynbnX   2024年05月17日   36   0   0 Html/Css
  uCg8iP04yNRs   2024年05月08日   158   0   0 Html/Css
NxhOJKtRn6gk