Cascading Order|css规则权重
Last Updated:2022-08-12
这篇文章是一个总结,总结css规则是如何应用的。 来源自w3文档
先集合可应用于element的所有规则,在满足media type(media query)的前提下
根据重要度和来源,如下规则的权重有低至高
- 浏览器(user agent)声明的规则
- 用户(不是网站的程序员)普通声明的规则
- 网站作者(程序员)普通声明的规则
- 网站作者(程序员)重要声明(!important)的规则
- 用户(不是网站的程序员)重要声明(!important)的规则
当两条规则重要度和来源都一样时,计算规则的权重,计算出来的值较高的获胜
- 首先最后计算出来的权重分为4位(千、百、十、个),分别对应(a,b,c,d)
- 如果是element的style属性(例如html代码中style="xxx"),那么a=1(赋值为1),否则就是a=0;
- 规则里头的选择器(selector).如果出现一次id,那么b+1;最后b=id选择器出现次数;
- 规则里头的选择器(selector).计算出现attributes(譬如类名)和假类的数量(我认为,应该是不重复。一个类算一次);数量赋予c;
- 规则里头的选择器(selector).计算出现的标签名和假标签(譬如 :first-line)的次数;数量赋予d;