有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

深入理解CSS权重(优先级)

代码编程 cat 1年前 (2021-06-11) 67次浏览 已收录 0个评论 扫描二维码

 

权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的:

权重记忆口诀。从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1

前端杂谈: CSS 权重 (Specificity)

通用标签ID类,选择包含加伪类

选择器 权重
!important Infinity(无限大)
行列样式 1000
Id选择器 100
Class选择器/属性/伪类 10
标签选择器 1
*通配符选择器 0 (大于默认样式与继承验样式)
继承样式 权重最小(比*通配符还小)

注意:id的权重是100并不是指id的一个权重值就是100,实际上这个100是一个进制数,不是2进制,也不是10进制;而是256进制,就是0到255后+1才是1,列如通配符的权重值0到标签、伪元素的权重值1,中时间实际上差了255。依次类推!
但值得注意的是,!important的权重值虽然是正无穷,但其实也是可也计算的,比如正无穷+1或者*1,就是要比正无穷大,其原理是不管那种语言,在计算机中正无穷的值,都是一个有界的。不是数学上无界的一个慨念!

01. *{}                         ====》0
02. li{}                        ====》1(一个元素)
03. li:first-line{}             ====》2(一个元素,一个伪元素)
04. ul li {}                    ====》2(两个元素)
05. ul ol+li{}                  ====》3(三个元素)
06. h1+ *[rel=up] {}            ====》11(一个属性选择器,一个元素)
07. ul ol li.red{}              ====》13(一个类,三个元素)
08. li.red.level{}              ====》21(两个类,一个元素)
09. style=""                    ====》1000(一个行内样式)
10. p {}                        ====》1(一个元素)
11. div p {}                    ====》2(两个元素)
12. .sith {}                    ====》10(一个类)
13. div p.sith{}                ====》12(一个类,两个元素)
14. #sith{}                     ====》100(一个ID选择器)
15. body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器,一个类,两个元素)</pre>
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址