关于css优先级的理解

时间 2019-12-06

标签关于 css 优先级理解栏目 CSS 繁體版

原文原文链接

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

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

那么对于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； spa

b 等于id选择器的数目；排序

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

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）： get

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、属性或元素选择器优先级更高。