关于css优先级的理解

最新推荐文章于 2022-03-20 21:57:55 发布

weixin_33877885

最新推荐文章于 2022-03-20 21:57:55 发布

阅读量151

点赞数

文章标签： python 嵌入式

原文链接：https://my.oschina.net/u/1403185/blog/180285

版权

2019独角兽企业重金招聘Python工程师标准>>>

在HTML中，加入CSS样式表的方式一般有3种：1.通过link链接CSS外部样式表（称之为外部样式表）；2.是在HTML的<head>段中用<style>元素将样式包含在页面内部的样式设置中（嵌入式样式表）；3.是直接在页面中加入一个style属性（内联样式表）。

那么浏览器是如何加载CSS层叠样式表的呢？浏览器先是加载HTML语言，并构建HTML文档树，如果有内联样式表，那么它会先加载他，其后若是还有嵌入样式表，那么他在内联样式表之后再加载，最后如果还有外部样式表那么他最后加载到网页中。所以是内联样式表的优先级>嵌入式样式表>外部样式表。

那么对于CSS样式表中选择器的优先级是：ID选择器>类选择器>元素选择器>伪元素选择器。虽然ID选择器的优先级最高，但一般并不会用到它，多用到的是类选择器与元素选择器。

对于下面一楼提出的关于选择器特殊性。这里特殊性是一个一个选择器的数字表示。
基本的：

在级联计算中指定一个CSS规则的权重时，会首先根据重要性（是否有!importance）和CSS来源对规则进行排序。重要性和来源相同的规则，就按特殊性排列：特殊性高的选择器会覆盖特殊性低的选择器。最后，如果两个选择器具有同样的来源、重要性和特殊性，写在样式表后面的那个规则就会覆盖写在前面的规则。这也适用于单一的属性，因此，如果在同一个规则中多次声明了相同的属性，最后的声明就会覆盖前面的声明。
因为使用@import声明导入的样式表必须要写在其他规则之前，如果在CSS文件后面出现的非导入规则，与导入文件中的规则具有同样的权重，导入规则将被覆盖（因为选择器的顺序，后面的覆盖前面的）。
根据W3C规范（http://www.w3.org/TR/css3-selectors/#specificity），特殊性的计算使用四个字母”a、b、c、d”来代表重要性依次递减，其中：

a 如果该声明是在style属性中定义的，则为1，否则为0；

b 等于id选择器的数目；

c 等于属性选择器、class和伪class的数量；

d 等于元素名和伪元素的数目。

非CSS语法的标记（如font属性），特殊性都归为0。基于这一系列规则，以下选择器的特殊性为 1,0,0,0 （a=1，b=0，c=0，d=0）：
<section style="padding-bottom: 10px;">
因为这里是内联CSS，a=1，其余数字是0。记住，假如在非内联的链接样式表中，有一处带10个id选择器（特殊性为0,10,0,0）的规则，它的优先级仍然不如以上选择器——特殊性的计算不是基于十进制升位的，后面的数再高也不能升到前一位：a=1的规则将始终优先于其他a=0的规则。
以下选择器更复杂一些，特殊性为0,0,1,3（a=0，b=0，c=1，d=3）：

article section h1.title {
...
}
因为不是内联的，a=0；因为没有id，b=0；因为有一个class选择器，c=1；因为有三个元素选择器
d=3。
基于这一系列算法来对特殊性进行计算，可能令人望而生畏。但实际上，有了一些经验后，很容易看出一个选择器比起另一个选择器特殊性是高还是低，如有一个或两个id选择器，或其他类似的明显提示。编写CSS时应该小心，如果没有必要，不要创建高特殊性的选择器。如果遇到棘手的情况，类似Firebug或Safari Web Inspector等工具将帮助你了解特殊性如何应用于元素，它们能按照特殊性排序来显示规则，将特殊性更高的规则显示在最上面，并将被特殊性更高的规则覆盖的属性用删除线划掉。有关内容详见第10章。然而应该记住两件重要的事情：内联CSS要比嵌入或链接CSS优先级更高；一个ID选择器要比任意数量的class、属性或元素选择器优先级更高。

转载于:https://my.oschina.net/u/1403185/blog/180285