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个**,所以尽量不要在线上使用这种方式。

上一篇:JavaScript编程:使用DOM操作样式表


下一篇:Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表