这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战
这是《你了解CSS吗》系列的第四篇，该该系列的其他篇入口如下：
正文
大家好，我是fire，上一篇汇总了At-rule的内容，这一篇我们汇总一下rules部分。rules也是我们平常开发中，写的最多的内容，比如：
div {
width: 100px;
height: 100px;
}
可以看到，一个rule是由selector(选择器) + 语句块{} + property(属性) + value(属性值)组成，如下：
所以，接下来就从这三个方向来汇总rules。
Selector(选择器)
通过查询，发现和Selector相关的规范文档有两份，分别是：
其中，Selectors Level 4目前还处于Editor's Draft(编辑草案) 阶段，估计短时间内还无法完成，所以接下来的汇总主要是通过对Selectors Level 3规范的查询。
CSS通过选择器将样式的描述属性绑定到文档(document)中的元素上，通过对Selectors Levels 3规范的中的选择器汇总，大概分为以下几类：
- 通用选择器(类型选择器、class选择器、ID选择器)
- 属性选择器
- 伪类选择器
- 伪元素选择器
- 组合选择器 下面分别来看一下这些分类下包含的选择器。
通用选择器(类型选择器、class选择器、ID选择器)
| 选择器 | 描述 |
|---|---|
| * | 任何元素都将被选择 |
| E | 选中HTML标签名为E的元素 |
| E.warning | 选中HTML标签名为E，且class属性值为“warning”的元素 |
| E#myid | 选中HTML标签名为E，且id属性值为“myid”的元素 |
属性选择器
| 选择器 | 描述 | 示例 |
|---|---|---|
| E[foo] | 选中HTML标签名为E，且E标签包含属性foo的元素 | div[foo]将选中<div foo='xxx'></div> |
| E[foo="bar"] | 选中HTML标签名为E，且包含属性名为foo，其值为bar的元素 | div[foo="bar"]将选中<div foo="bar"></div> |
| E[foo~="bar"] | 选中HTML标签名为E，且包含属性名为foo，其值是以空格分隔的单词列表，其中正好有一个值为bar | div[foo~="bar"]将选中<div foo="baa bar bac"></div> |
| E[foo^="bar"] | 选中HTML标签名为E，且包含属性名为foo，其值以”bar“开头的元素 | div[foo^="bar"]将选中<div foo="barxxx"></div> |
| E[foo$="bar"] | 选中HTML标签名为E，且包含属性名为foo，其值以”bar“结尾的元素 | div[foo^="bar"]将选中<div foo="xxxbar"></div> |
| E[foo*="bar"] | 选中HTML标签名为E，且包含属性名为foo，其值包含子字符串”bar“的元素，该选择器的效果包含上面两种 | div[foo^="bar"]将选中<div foo="xxxbarxxx"></div> |
| E[foo|="en"] | 选中HTML标签名为E，且包含属性名为foo，其值包含以en开头且后接连字符-的元素 | div[foo|="en"]将选中<div foo="en-xxx"></div> |
伪类选择器
| 选择器 | 描述 |
|---|---|
| :root | 选中文档的根元素，始终指向html元素 |
| E:nth-child(n) | 选中E元素的父元素的第n个同类子元素 |
| E:nth-last-child(n) | 选中E元素的父元素的第n个同类子元素，从后向前数 |
| E:nth-of-type(n) | 选中E元素的父元素的第n个同类子元素（同:nth-child的区别见番外篇） |
| E:nth-last-of-type(n) | 选中E元素的父元素的第n个同类子元素（同:nth-last-child的区别见番外篇） |
| E:first-child | 选中E元素的父元素的第1个同类子元素 |
| E:last-child | 选中E元素的父元素的最后一个同类子元素 |
| E:first-of-type | 选中E元素的父元素的第一个同类子元素（见） |
| E:last -of-type | 选中E元素的父元素的最后一个同类子元素（同:last-child的区别见番外篇） |
| E:only-child | 选中E元素的父元素的唯一子元素（唯一表示”父元素不包含其他子元素“） |
| E:only-of-type | 选中E元素的父元素下唯一类型的子元素(唯一类型表示”父元素下不包含其他该类型的元素，可以包含其他类型的元素“) |
| E:empty | 选中一个没有子元素的E元素(包括文本节点) |
| E:link | 选中的E 元素是其目标尚未访问的超链接的源锚点元素 |
| E:visited | 选中的E 元素是其目标已访问的超链接的源锚点元素 |
| E:active | 选中鼠标点击状态下的E元素 |
| E:hover | 选中鼠标悬停状态下的E元素 |
| E:focus | 选中获取焦点状态下的E元素(比如表单输入元素) |
| E:target | 选中作为锚点目标的E元素 |
| E:lang(fr) | 选中属性lang="fr"的E元素 |
| E:enabled | 选中启用状态下的E元素(比如input元素，默认启用状态可以输入文本) |
| E:disabled | 选中禁用状态下的E元素(比如包含属性disabled="disabled"的input元素) |
| E:checked | 选中 处于选中状态的type="radio"的input元素 或 type="checkbox" 或 select元素中的option元素 |
| E:not(s) | 选中的E元素中排除s选择器选中的元素 |
伪元素选择器
| 选择器 | 描述 |
|---|---|
| E::first-line | 选中E元素中文本的第一行 |
| E::first-letter | 选中E元素中文本的第一个文字或字母 |
| E::before | 在E元素之前生成内容 |
| E::after | 在E元素之后生成内容 |
组合选择器
| 选择器 | 描述 |
|---|---|
| E F | 选中E元素的后代中的F元素 |
| E > F | 选中E元素的F子元素(不包含孙辈及以下后代) |
| E + F | 选中紧跟在E元素之后的F元素 |
| E ~ F | 选中E元素后面的F元素(不一定是紧跟在E元素后面) |
总结
以上是对Selectors Level 3规范中定义的选择器的汇总，在Selectors Level 4规范中新增了一些其他的选择器，考虑到Selectors Level 4规范目前所处的状态，这里就不汇总了，上面只是简单的描述了一下选择器的行为，限于篇幅以及本系列的主要目的，其中一些常用的会放在后续的番外篇进行详细介绍，就不在这里过多介绍了。
