CSS中的层叠、特殊性、继承、样式表中的@import

CSS中的层叠、特殊性、继承、样式表中的@import

层叠

CSS有一个机制是层叠，层叠可以理解为对样式的覆盖，优先性为：

1. 网站开发者的样式表
2. 用户样式（通过设置浏览器的显示选项）
3. 浏览器默认的样式

以上优先级递减，也就是说不写任何样式的情况下采用的就是浏览器默认显示样式。

特殊性

特殊性可以理解成开发者样式表代码的优先级，可以对应a,b,c,d四个级别。优先性为：

1. 内联样式，a = 1
2. ID选择符，b=1
3. 类选择符、伪类选择符、属性选择符，c=1
4. 元素选择符和伪元素选择符，d=1

以上的a，b, c, d 可以理解是用十进制计算它的特殊性，特殊性越高则优先级越高。

继承

继承表示元素的后代会继承父代的样式，跟层叠不是一回事。比如，设置body{color: red}，那么body中的p段落的字体都会变成红色。

@import

@import url("src")可以导入一个样式表。可以在style内联样式表中也可以在link外部文件中导入。值得注意的是这样导入也算一个额外的HTTP请求，并不能控制请求为1个**，所以尽量不要在线上使用这种方式。