CSS层叠样式 ｜ 青训营笔记

CSS概述

前端三件套（HTML、CSS、JavaScript）中，CSS主要负责网页元素的样式。CSS全称为Cascading Style Sheets，层叠样式表，顾名思义，CSS是为页面元素叠加样式。

CSS的基本结构包括元素选择器，属性选择器及属性值，属性选择器与属性值组成一条声明，多条声明在一起称为声明组：

h1 {
    color: white;
    font=size: 14px;
}

CSS引入方式

常用的CSS引入方式有三种：

• 外链，使用HTML中的<link>标签来引入独立的CSS文件
  • <link rel="stylesheet" href="xxx.css">
• 嵌入，在HTML的<style></style>标签中直接书写CSS样式，仅对当前HTML文件有效

  • <style>
        body {
            width: 100px; 
            height: 100px;
        }
    </style>
    

• 内嵌，在HTML某一元素的标签中直接通过style属性赋予样式，只对当前元素有效，不推荐
  • <p style="margin: 1em 0">This is a example.</p>

CSS工作原理

如图所示，计算机从上至下加载HTML文件并进行解析后产生DOM树，并在解析HTML后加载解析CSS文档，接着将解析后的CSS样式赋给DOM树中的对应元素，最后在浏览器中展示出来。

选择器

CSS的选择器用于选取需要添加样式的单一或系列元素，CSS提供了多种方式选择元素，并且选择器间可以相互组合，方便选出需要的元素

CSS选取元素的方式有：

• 按标签名、类名、id来选取元素
• 根据标签属性来选取元素
• 按照元素在DOM树中的位置来选取

常见的选择器

• 通配符选择器，通配符选择器*会选中页面中所有元素。
• 元素选择器，根据标签名选中对应的元素，格式：元素名，如p、a、div等。
• 类选择器，根据类名选中对应的元素，不同元素可以属于同一类，格式：.类名，如.box、.red等。
• id选择器，根据id选中对应的元素，不同元素的id不能相同，格式：#id，如#head、#aside等。

属性选择器

属性选择器语法格式：标签[] {}。[]中可以填写：

• 属性名
• 属性名 匹配运算符 属性值（可以使用正则表达式），常用匹配运算符有：
  • =：绝对等于
  • *=：包含
  • ^=：以...开头
  • $=：以...结尾

属性选择器实例：

/* 选择有id属性的元素 */
a[id] {
    background-color: orange;
}
/* 选择class属性中包含links的元素 */
a[class*=links] {
    background-color: blue;
}
/* 选中href属性中以http开头的元素 */
a[href^=http] {
    background-color: brown;
}
/* 选择href属性中以pdf结尾的元素 */
a[href$=pdf] {
    background-color: purple;
}

伪类选择器

伪类：根据条件对元素进行分类用于选中元素的特殊状态，伪类选择器分为状态伪类选择器和结构伪类选择器，格式：标签:条件

状态伪类选择器：选中元素的特定状态

常见的状态伪类选择器：

• 链接
  • 未访问的链接：a:link
  • 已访问的链接：a:visited
  • 鼠标悬停链接：a:hover
  • 已选择的链接：a:active

结构伪类选择器：选中元素在DOM树中的位置相关，如：first-child、last-child等。

常见结构伪类选择器：

• ul li:first-child,表示选中ul的第一个子元素
• ul li:last-child,表示选中ul的最后一个子元素
• p:nth-child(n),表示选中父类的子代中第n个元素且为p元素才生效
• p:nth-of-type(n) 表示选中父类的子代中第n个类型为p的元素

选择器组合方式

名称	语法	说明
直接组合	AB	选中同时满足A和B的元素
后代选择器	A B	选中A后代中满足B的元素
子元素选择器	A>B	选中A子代中满足B的元素
相邻兄弟选择器	A+B	选中A元素之后相邻的同级且满足B的元素
普通兄弟选择器	A~B	选中A元素之后所有的同级且满足B的元素

选择器组

可以将具有相同样式的选择器组合在一起，利用逗号分隔，即可选中所有选择器结果的并集。

h1,h2,h3,h4,h5,h6 {
    color: red;
}

选择器优先级

单一选择器优先级：内联样式 > id选择器 > 类选择 > 元素选择器 多选择器组合优先级判断原则： 优先级由A、B、C、D四个值进行判断，其中对应值计算规则如下：

• 如果存在内联样式则A为1，否则为0；
• B为ID选择器出现的个数；
• C为类选择器、属性选择器、伪类选择器出现的个数；
• D为标签选择器和伪元素选择器出现的个数

将ABCD进行按顺序进行组合，组合数字最大的，优先级更高，当优先级相同时，遵循后面的优先级更高的原则。

样式继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

• 一般和文字相关的属性会被继承
• 一般和盒模型相关的属性不会被继承
• 想要继承，使用关键字**inherit**

CSS求值过程

如图所示，是一个CSS的属性计算过程，其流程描述如下：

1. HTML解析成DOM树，解析过程中将从CSS中搜集的样式放在一起组成样式规范；
2. 对样式规范进行筛选，获得符合规则的一组声明值；
3. 按照优先级顺序选出优先值最高的属性值即层叠值；
4. 若层叠值为空，此时采用继承或使用初始值的方法得到指定值（指定值一定不为空）；
5. 将一些相对值转换为绝对值，从而获得计算值（此时，属性值之中的关键字、百分比等还没有转换）；
6. 进一步将计算值转换从而获得使用值（此时的使用值中存在小数）；
7. 将小数转换为整数，从而得到实际值。

计算值和使用值的区别：单纯的分析CSS和HTML就可以得到的值即为计算值；使用者需要结合实际环境（如浏览器窗口大小）得到的值为使用值。