（2）CSS 选择器详解

本知识学习用时：4小时，总第23/10000小时

前言：本篇行文顺序为，首先在第一部分介绍“ HTML 文档树结构”。在完全理解这个“树结构”的基础上，才可以很好的掌握文章下边紧接着的两个大选择器（组合选择器和伪类选择器）。因为，只有有了这个“结构树”，我们本篇讨论的“选择器”才能够起作用。又是很大、很杂、很基础、很重要的知识点，属必掌握项。

一、HTML 文档树结构

通过之前对 HTML 相关知识的学习，我们知道，一个 HTML 文档是以各个元素间的层次结构为基础建立起来的，每个合法的文档都会生成一个结构树（如下例）。在这个层次结构中，每一个元素都有一个自己的位子，并且每个元素相对于这个结构里的其他元素，他们彼此或是“父子关系”、或是“祖孙—后代关系”、或是“直接相邻关系”、或是“普通相邻关系”等。

（如下例的 HTML 文档及所对应的 “结构树”：）

（文档结构为：）

① 父子关系元素：如果一个元素出现在文档层次结构中另一个元素的上一层，则称前者是后者的“父元素”，后者是前者的“子元素”。

② 祖孙-后代关系元素：如果一个元素在另一个元素的直接上一层，他们是“父子关系”，而如果一个元素到另一个元素的路径要经过两层或多层，这些元素则是“祖孙-后代关系”。

③ body 元素是浏览器默认显示的所有元素的祖先， html 元素则是整个文档的祖先（因此，html 元素又称“根元素”）。

二、组合选择器

1. 多元素选择器：

-- 用法：为多个元素应用同一个样式；

-- 格式：如给上例中元素 h1 和 h2 加样式，使之背景颜色为 yellow

⚠️注意多个选择器之间必须有 , 这个字符。

2. 后代选择器：

-- 用法：使一些样式、规则只在某一些指定的有“祖孙-后代关系”的后代元素上适用，其他非指定的结构中不适用；

-- 格式：如给上例中只给元素 ul 的后代元素 em 加样式，使其文字被中横线划去、背景色为 yellow

⚠️注意选择器之间用“空格”这个“结合符”隔开。

3. 子元素选择器：

-- 用法：使一些样式、规则只在某一些指定的有直接的“父子关系”的子元素上适用，其他非指定的结构中不适用；

-- 格式：如给上例中只给元素 p 的子元素 em 加样式，使其文字被中横线划去、背景色为 yellow

⚠️注意选择器之间用 > 这个“结合符”隔开。

4. 直接相邻元素选择器

-- 用法：前提，两个元素有共同的父元素，且后一个元素“紧接”在前一个元素后边时，你想对后一个元素添加样式;

-- 格式：如给上例中只给“紧接”第一个 h2 元素的 p 元素加样式，其他 p 不变，使其文字被中横线划去、背景色为 yellow

⚠️注意选择器用 + 这个“结合符”隔开。

5. 普通相邻元素选择器

-- 用法：相对于“直接相邻元素选择器”而言，两个元素也必须有共同的父元素，但后一个元素不需要“紧接”在前一个元素后边，你也可以对后一个元素添加样式;

-- 格式：如给上例中第一个 h2 元素后边的 h2 元素加样式，使其文字被中横线划去、背景色为 yellow

⚠️注意选择器用 ~ 这个“结合符”隔开。

三、伪类

① 为什么需要“伪类”？

首先再次复习：《（2）HTML元素、属性详解》中关于“超链接 a 元素”的相关知识点。

“链接”在实际页面中出现的频率很高，人们想对“未访问的页面”和“已访问的页面”作样式上的区分。直观的方式就是在 HTML 文档里边，对 a 元素作 class 属性的添加，让这个 a 元素加入一个类：

然后通过“类选择器”对其加样式：

但，显而易见，这种方式根本就不合乎实际操作，因为不可能每访问一个新页面就去修改一下链接的“类”。

于是，CSS 定义了两个只用于“超链接”的“静态伪类”，这些“伪类”不用在 HTML 文档中输入，可以直接对其添加样式。分别为：

1️⃣ 指示这个“超链接”（即 a 元素里有一个 href 属性）未被访问。

⚠️注意书写格式上的“冒号”，这个冒号（：）是“伪类”和“伪元素”的名片。且冒号与状态 link 之间不能有空格。

2️⃣ 指示这个“超链接”已被访问。

② 为什么需要“动态伪类”？

在①中我们了解到 CSS 为适应需要最先定义了两个“静态伪类”，但 :link 和 :visited 对文档样式的改变很有限，一般第一次显示过后就不会再起作用了。而人们的需要则更多：链接“焦点 focus ”时、在链接上“悬停 hover ”时、“活动 active ”状态时都需要样式的区分。

于是，CSS 又定义了3个“动态伪类”，它们可以根据用户行为相应的改变文档的外观。这些“伪类”或者说所有“伪类”都不用在 HTML 文档中输入，可以直接对其添加样式。分别为：

1️⃣ 指示这个元素拥有输入“焦点”——即可以接受键盘输入，或通过某种方式可以激活。

2️⃣ 指示当鼠标停留在这个元素上时，外观可以作相应改变。

3️⃣ 指示这个元素可以被用户输入“激活”，如，用户停留在一个超链接上，当点击鼠标时，这个链接就会“激活”。

⚠️注意：

-- CSS “伪类”不仅可以改变不同状态时的颜色，还可以应用任何需要的样式；

-- “动态伪类”与“静态伪类”不同，“动态伪类”可以应用于任何元素，不局限于“超链接”；

-- 考虑到“继承、层叠”的原因（下一篇会详谈），“伪类”的顺序很重要，通常为：

四、伪类选择器

① “静态、动态伪类选择器”合用实例：

首先再次复习：《（3）HTML表单详解》，掌握表单元素。然后动手操作以下例子。

→ （根据以下 HTML 文档：）

→（再将 CSS 样式引入其中：）

⚠️注意：下一篇文章会详细阐述“链接”在随用户操作状态变化时，其样式是按怎样的顺序显示的。

② 用户界面元素伪类选择器（UI 元素伪类选择器）：

1️⃣ 在“表单”元素中，radio 和 checkbox 都具有“选中”和“未选中”状态，以下选择器可以定义这两种状态的样式。

2️⃣ 当我们用鼠标左键按住进行网页取词时，浏览器在默认情况下是“蓝底黑字”，如果我想要改变这个样式，我可以用以下选择器。

3️⃣ 默认情况下，web 表单元素皆“可用”，但其元素（文字输入框、密码框、单选框、复选框等）也可以有“不可用”的状态。那么下边的选择器可以分别对表单元素的这两种状态设置样式。

4️⃣ 默认情况下，web 表单元素皆“可读写”，但其元素（输入框、文本域等）也可以有“只读”的状态。那么下边的选择器可以分别对表单元素的这两种状态设置样式。

⚠️注意选择器的格式！

代码实例：

→ （根据以下 HTML 文档：）

→（再将 CSS 样式引入其中：）

③ 结构伪类选择器：

⚠️此大类选择器需要用实例讲解，篇幅较长，将后续另起一篇文章，到时附以链接。此篇仅作相关知识点列举。

（下文中 E 指 element 元素）

第一类：

第二类：

第三类：

后记：终于完成了这篇，知识点很多，如果只是单纯看一遍收获会很小，代码的学习需要我们动起手来，不停的敲、不停的试。跟机器打交道的好处就是，它一般来说不会骗你，对就是对，错就是错。总之，感谢这个时代，加油！

欢迎继续关注下文 ：

（3）CSS 结构和层叠

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）