CSS知识

CSS Cascading Style Sheet 层叠样式表

1. 继承

   继承指的是设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级、后代)都具有此属性

   并不是所有的属性都可以继承,可以继承的属性主要以color/font开头/text开头/line-开头,还有visibility、cursor等

   继承的特殊情况:

   a标签的文字颜色和下划线是不能继承的

   h标签的文字大小是不能继承的

   text-decoration是不能继承的

   vertical-align是不能继承的

   内联元素不能继承text-align,text-indent

2. 层叠

   只有在多个选择器选中同一个标签, 然后又设置了相同的属性, 才会发生层叠

   层叠机制的原理是为规则赋予不同的重要程度

   重要程度有以下几种:

   • 作者样式表: 网站开发者所写的样式
   • 用户样式表: 用户可以通过浏览器的设置选项,为网页应用自己的格式
   • 浏览器(或用户代码)的默认样式表: 一般都会被作者样式表覆盖
   • !important: CSS允许用户使用!important标注覆盖任何规则,包括作者和用户。其中,用户是最重要的,主要是出于无障碍交互的需要

   归纳起来,层叠机制的重要性级别从高到低如下:

   • 标注为!important的用户样式
   • 标注为!important的作者样式
   • 作者样式
   • 用户样式
   • 浏览器(或用户代码)的默认样式

   在此基础上,规则再按选择符的特殊性(优先级)排序。特殊性高的选择符会覆盖特殊性低的选择符。如果两条规则的特殊性相等,则后定义的规则优先

3. 特殊性(优先级)

   为了量化规则的特殊性,每种选择符都对应着一个数值。一条规则的特殊性就表示其每个选择符的累加数值。这里的累加数值是基于位置累加,以保证10个类选择符累加的特殊性不会大于等于1个ID选择符的特殊性,避免ID这种高特殊性选择符被一堆低特殊性选择符的累加值所覆盖。如果某条规则中用到的特殊性不足10个,为简单起见,也可以使用十进制来计算其特殊性

   任何选择符的特殊性都对应于如下4个级别,即a、b、c、d:

   • 行内样式,a为1
   • b等于ID选择符的数目
   • c等于类(class)选择符、伪类选择符及属性选择符的数目
   • d等于类型(type)选择符和伪元素选择符的数目

   选择符	特殊性	十进制特殊性
   style=""	1,0,0,0	1000
   #id0 #id1 {}	0,2,0,0	200
   #id .class {}	0,1,1,0	110
   div#id {}	0,1,0,1	101
   #id {}	0,1,0,0	100
   div.class0 .class1 {}	0,0,2,1	21
   div.class {}	0,0,1,1	11
   div div {}	0,0,0,2	2
   div {}	0,0,0,1	1
   * {}	0,0,0,0	0

   !important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

   看样式:

   • 看是否命中对应的标签

   • 根据权重,即 比较标签的数量。通过比较 ID、类、标签 这三种选择器的数量来决定谁的优先级最高。当数量相同时,通过层叠来决定