预备知识
写在前面
上一节我们讲了关于确定选择器的一些方法，实际上它已经涵盖了大部分情况，只是分类显得稍微有些粗浅。如果你不大记得了，这里给一个提示，大致是讲了三类：通过类名，按所处位置以及按所处状态。如果你完全不记得了，建议你好好复习一下。本节我们继续对这部分内容进行更细致的学习
最后我还给出了选择器参考附录，里面列举了一些例子，供读者复习总结
选择器种类
类型、类和 ID 选择器
1 | h1 { } |
一个 class 的选择器
1 | .box { } |
一个 id 的选择器
1 | #unique |
标签属性选择器
根据一个元素上的某个标签的属性的存在来选择元素（仅给定属性）
1 | a[title] { } |
根据一个有特定的标签属性是否存在来选择（给定整个声明）
1 | a[href="https://example.com"] { } |
伪类与伪元素
伪类用来样式化一个元素的特定状态。之所以冠以“伪”字，是因为它并不是对所有状态都适用的
1 | a:hover { } /* 当鼠标悬浮于链接上时 */ |
另一个概念是伪元素，选择一个元素的某个部分而不是元素自己
1 | p::fisrt-line { } /* 选择第一行 */ |
运算符
后代选择器，在上一节中我们称之为包含选择器，也十分贴切
1 | li strong { } |
子代选择器选择了 <article> 元素的初代子元素
1 | article > p { } |
类型、类和 ID 选择器
类型选择器
类型选择器有时也叫做“标签名选择器”或者是”元素选择器“，十分简单易懂
类选择器 - 多个类同时应用到一个元素
以下例子中假定 <div> 的属性 class="wrapper a"，此时 .wrapper a {} 是一种错误的类选择器，正确的格式应当如下
1 | .wrapper.a { } |
全局选择器
全局选择器也称为通配选择器，是由一个 * 指代的，它选中了文档中的所有内容，需要小心使用
以上面的 .wrapper {} 为例，实际上它是以下代码的简写
1 | *.wrapper { } |
全局选择器的一种用法是让选择器更易读，例如后代选择器 article :first-child 容易与伪元素选择器 article:first-child 混淆，于是我们可以添加 * 以示区别
1 | article *:first-child { } |
此时选择器正选中<article>元素的任何第一子元素
ID 选择器
我们可以给元素一个id，只需要在属性中添加 id=id_name，然后使用 ID 选择器
1 | #id_name { } |
属性选择器
存否和值选择器
除了一开始讲的两个例子 [attr] 和 [attr=value]
1 | a[title] { } |
我们还可能对 [attr~=value] 这种选择器感兴趣，以 li[class~="a"] 为例，它会匹配会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值
1 | <ul> |
也即它不仅会匹配 Item 1，还会匹配 Item 2
子字符串匹配选择器
这是一种更加高级且细致的匹配方式，例如 [attr*=value]，[attr$=value] 等
伪类与伪元素
伪类
伪类是选择器的一种，它用于选择处于特定状态的元素：一种特定状态是位置状态，下例将将选中文章中的第一个子元素
1 | article p:first-child { } |
另一种是用户行为伪类，只有在用户以某种方式和文档交互的时候应用
:hover只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素:focus只会在用户使用键盘控制，选定元素的时候激活
伪元素
伪元素开头为双冒号 ::，::first-line伪元素选择器将会选中一段的第一行
一类特殊的伪元素
::before 和 ::after 是一组特别的伪元素，它们和content属性一同使用，使用 CSS 将内容插入到你的文档中。一种常见的用法是插入一个图标
关系选择器
除了后代选择器和子代选择器，我们还可能遇到下面两种选择器
邻接兄弟
邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随<p>元素之后的<img>元素
1 | p + img { } |
通用兄弟
如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。要选中所有的<p>元素后任何地方的<img>元素，我们会这样做：
1 | p ~ img { } |
Appendix - 选择器参考列表
| 选择器 | 示例 |
|---|---|
| 通配选择器 | * {} |
| 类选择器 | .box {} |
| ID 选择器 | #unique {} |
| 伪类选择器 | p:first-child {}（选择 <p> 父元素所有后代中的第一个 <p> 子元素），a:hover （当鼠标悬浮于链接上时），button:hover（当鼠标悬浮于按钮上时），:root （文档的根元素，在 HTML 中这通常是 <html> 元素） |
| 伪元素选择器 | p::first-line {} （选择 p 元素的第一行），::selection（CSS 伪元素应用于文档中被用户高亮的部分，如使用鼠标或其他选择设备选中的部分），::before（创建一个伪元素，其将成为匹配选中的元素的第一个子元素，常通过 content 属性来为一个元素添加修饰性的内容；::after也类似） |
| 后代选择器 | article p 如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母等）元素，则它们将被选择 |
| 子代选择器 | article > p 当使用 > 选择符分隔两个元素时，它只会匹配那些作为第一个元素的直接后代 (子元素) 的第二元素 |
提示：伪类和伪元素选择器一开始可能容易混淆，请通过上述例子检验一下自己的理解是否到位