选择器分类
基本选择器
| 类型 | 例子 | 说明 |
|---|---|---|
| 通配符选择器 | * | 选择任意元素 |
| 类型选择器 | p | 选择p标签的元素 |
| 类选择器 | .name | 选择拥有.name类的元素 |
| ID选择器 | #name | 选择拥有id为name的元素 |
| 属性选择器 | [href] | 选择有属性href的元素 |
属性选择器
| 类型 | 说明 |
|---|---|
[href] | 选择有属性href的元素 |
[href="https://www.baidu.com"] | 选择有属性href且值为https://www.baidu.com的元素 |
[href^="https://"] | 选择有属性href且值以https://开头的元素。 |
[href\|="https"] | 选择有属性href且值以https开头的元素，https后面必须是空格或连接字符-。 |
[href$="/"] | 选择有属性href且值以/结尾的元素。 |
[href*="baidu"] | 选择有属性href且值包含baidu的元素。 |
[href~="baidu"] | 选择有属性href且值包含baidu的元素，baidu前后必须是空格或连接字符-。 |
分组选择器
| 类型 | 例子 | 说明 |
|---|---|---|
| 分组选择器 | A, B | 选择所有能被列表中的任意一个选择器选中的节点 |
组合选择器
| 类型 | 例子 | 说明 |
|---|---|---|
| 条件选择器 | div.container | 选择div标签下满足类名为container元素 |
| 后代选择器 | div p | 选择div标签下所有的p元素，无论元素是否与div构成父子关系 |
| 直接子代选择器 | div>p | 选择div标签下所有的p元素，且选中元素与div构成父子关系 |
| 一般兄弟选择器 | div~p | 选择div标签后面的p元素，无论元素是否与div构成相邻关系 |
| 紧邻兄弟选择器 | div+p | 选择div标签后面的p元素，且选中元素与div构成相邻关系 |
伪元素选择器
| 类型 | 说明 |
|---|---|
::before | 标签内部第一个元素 |
::after | 标签内部最后一个元素 |
伪类选择器
| 类型 | 说明 |
|---|---|
:link | 链接，一般用于 a 标签 |
:hover | 鼠标覆盖状态，一般用于 a 标签和表单元素 |
:active | 鼠标点击状态，一般用于 a 标签和表单元素 |
:visited | 鼠标点过状态，一般用于 a 标签和表单元素 |
:focus | 获得焦点状态，一般用于表单元素 |
:blur | 失去焦点状态，一般用于表单元素 |
:enabled | 起用状态，一般用于表单元素 |
:disabled | 禁用状态，一般用于表单元素 |
:checked | 选中状态，一般用于表单元素 |
:empty | 空元素状态（元素里面没有元素） |
:first-child | 选择满足条件的第一个元素（按照同级元素的次序计数） |
:last-child | 选择满足条件的最后以个元素（按照同级元素的次序计数） |
:nth-child(n) | 选择满足条件的第n个（按照同级元素的次序计数）。n可以是表达式，如2n-1选择奇数位置的元素。 |
:first-of-type | 选择满足条件的第一个元素（按照满足条件的同级元素的次序计数） |
:last-of-type | 选择满足条件的最后个元素（按照满足条件的同级元素的次序计数） |
:nth-of-type(n) | 选择满足条件的第n个元素（按照满足条件的同级元素的次序计数）。n可以是表达式。 |
:not(selector) | 选择不满足选择器selector的元素。 |
选择器优先级
优先级次序
| 位次 | 选择器 |
|---|---|
| 无影响 | 通配选择符（*）关系选择符（+, >, ~, ’ ', |
| C | 类型选择器、伪元素 |
| B | 类选择器、属性选择器、伪类选择器 |
| A | ID选择器 |
| 高 | 内联样式 |
| 最高 | !important |
优先级比较
通常使用、、 来比较选择器优先级。这三个字母对应上面优先级次序对应选择器的数目。
- 比较两个选择器时，A越大，优先级越高
- 若A相同，B越大，优先级越高
- 若A和B相同，C越大，优先级越高
标准文档中没有指定内联和important的优先级，实际计算中我们可以把考虑比较顺序调整一下：!important > 内联样式 > A>B>C。
一些例子：
| 选择器 | a | b | c |
|---|---|---|---|
* | 0 | 0 | 0 |
ul | 0 | 0 | 1 |
ul li | 0 | 0 | 2 |
ul ol+li | 0 | 0 | 3 |
.red | 0 | 1 | 0 |
ul.red | 0 | 1 | 1 |
#id | 1 | 0 | 0 |
#id > .b > .c | 1 | 2 | 0 |
层叠和继承
在实际运用中，同一个元素的样式来自多个CSS样式，层叠则规定了如何合并这些样式。
三个影响因素：
- 重要程度：重要程度越高，影响越大
- 优先级：优先级越高，影响越大
- 资源顺序：越靠后的资源，影响越大
重要程度
用户代理样式：浏览器默认的样式
用户样式：开发人员在浏览器设置的样式
作者样式：页面作者设置的样式
| 级别 | 来源 | !important |
|---|---|---|
| 1 | user agent (用户代理样式) | normal |
| 2 | user (用户样式) | normal |
| 3 | author(页面作者样式) | normal |
| 4 | animations (动画) | |
| 5 | author (用户作者样式) | !important |
| 6 | user (用户样式) | !important |
| 7 | user agent (用户代理样式) | !important |
| 8 | transitions (过渡) |
