--- highlight: a11y-dark theme: smartblue --- 本文来系统的学习一下 `CSS` 选择器相关的内容。 ## 1.id选择器 `ID` 选择器以 `#` 开头，它选择的是文档中 `id` 属性的值。 ```css /* 这会让id等于app的元素的背景变为红色 */ #app { background: red } /* 这会让id等于box的元素的背景变为绿色 */ #box { background: green } ``` ![未命名文件 (2).png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29dedb5305704ce8a34ef96656ff355a~tplv-k3u1fbpfcp-watermark.image?) ## 2.类选择器类选择器以一个句点（`.`）开头，它选择的是文档中应用了这个类的所有元素。 ```css /* 这会让class等于app的元素的背景变为红色 */ .app { background: red } /* 这会让class等于box的元素的背景变为绿色 */ .box { background: green } ``` ![未命名文件 (3).png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b723d0dc9f204cc881f30407606d1a1a~tplv-k3u1fbpfcp-watermark.image?) ## 3.标签选择器有时也叫做 **类型选择器** 或者是 **元素选择器**，因为它在文档中选择的是 `HTML` 标签/元素。 ```css /* 这会让所有的div标签的背景变为红色 */ div { background: red } /* 这会让所有的span标签的背景变为蓝色 */ span { background: blue } /* 这会让所有的p标签的背景变为绿色 */ p { background: green } ``` ![未命名文件 (4).png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a34f4e8b62d4507a6ce15e49fea6ef2~tplv-k3u1fbpfcp-watermark.image?) ## 4.交集选择器相交的部分就是要设置属性值的标签。选择器之间没有任何的连接符号（也不允许出现空格），选择器可以是标签名称，也可以是 `id`、`class` 名称。 ```css /* 格式: 选择器1选择器2...{ 属性:值; } */ /* 这会让id等于app的div标签的背景变为红色 */ div#app { background: red } /* 这会让class等于app的span标签的背景变为蓝色 */ span.app { background: blue } /* 这会让id等于box的p标签的背景变为绿色 */ p#box { background: green } ``` ![未命名文件 (5).png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0784c021f85647f1a2f85f5182c0c952~tplv-k3u1fbpfcp-watermark.image?) ## 5.并集选择器并集选择器，选择器之间利用（`，`）连接，选择器可以是标签名称，也可以是 `id`、`class` 名称。 ```css /* 格式: 选择器1选择器2...{ 属性:值; } */ /* 这会让所有的class等于app的标签以及所有的p标签的背景变为红色 */ .app,p { background: red } ``` ![未命名文件 (6).png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08aaa4a464644ad2ba6e44881956e809~tplv-k3u1fbpfcp-watermark.image?) ## 6.通配符选择器也称为“全局选择器”，由一个星号（`*`）代指，它选中了文档中的所有内容或者是父元素中的所有内容。 ```html ``` ![未命名文件 (9).png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4326991af4454f4eb6bb11c0c839f9e1~tplv-k3u1fbpfcp-watermark.image?) ## 7.后代选择器后代选择器，用单个空格（` `）字符组合两个选择器，匹配第祖先元素中所有的对应元素。 ```css ``` ![未命名文件 (14).png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f73c9a46a6d04bdcbd5b8579d0f5455b~tplv-k3u1fbpfcp-watermark.image?) ## 8.子代选择器子代选择器，用单个大于号（`>`）组合两个选择器，只会在直接子元素中进行匹配。继承关系上更远的后代则不会匹配。 ```css ``` ![未命名文件 (15).png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ebeabd29351435982218128435ccf4d~tplv-k3u1fbpfcp-watermark.image?) ## 9.兄弟选择器兄弟选择器，使用（`~`）组合两个选择器。但是要注意： - 兄弟元素之间可以存在其他元素； - 只能选择元素后面的兄弟元素。 ```css ``` ![未命名文件 (1).png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f90e2f733a25417bbe17964d94112fe0~tplv-k3u1fbpfcp-watermark.image?) ## 10.相邻兄弟选择器兄弟选择器，使用（`+`）组合两个选择器。但是要注意： - 兄弟元素之间不可以存在其他元素； - 只能选择元素后面的兄弟元素。 ```css ``` ![未命名文件.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df7347cbdba44fe0913e221d4d001a80~tplv-k3u1fbpfcp-watermark.image?) ## 11.属性选择器顾名思义，是根据标签的属性进行选择的选择器，大概分为以下七种。 ### [attr] 示例：`[name]`，选择带有 `name` 属性的所有元素。 ```css [name] { background: red; } ``` ![未命名文件 (2).png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/faee1302f5b7409ba1831e31b7743dc6~tplv-k3u1fbpfcp-watermark.image?) ### [attr=value] 示例：`[name="hzw"]`，选择 `name` 属性值等于 `hzw` 的所有元素。 ```css [name='hzw'] { background: red; } ``` ![未命名文件 (3).png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c54265fa2a4f41a299b9d91c6856605c~tplv-k3u1fbpfcp-watermark.image?) ### [attr~=value] 示例：`[name~="hzw"]`，选择 `name` 属性包含单词 `hzw` 的所有元素。注意：必须是整个单词，多个单词使用空格隔开。 ```css [name~='hzw'] { background: red; } ``` ![未命名文件 (4).png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bdee59c3eec548b3b39fdbc4216676fd~tplv-k3u1fbpfcp-watermark.image?) ### [attr|=value] 示例：`[name|="hzw"]`，选择 `name` 属性值以 `hzw` 开头的所有元素。注意：必须是整个单词或者中间有连字符的单词。 ```css [name|='hzw'] { background: red; } ``` ![未命名文件 (5).png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54e76abe83144284a8c31a5b605a88b3~tplv-k3u1fbpfcp-watermark.image?) ### [attr^=value] 示例：`[name^="hzw"]`，选择其 `name` 属性值以 `hzw` 开头的所有元素。无限制。 ```css [name^='hzw'] { background: red; } ``` ![未命名文件 (6).png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7ad455b13fc4ba2811c0bf959641621~tplv-k3u1fbpfcp-watermark.image?) ### [attr$=value] 示例：`[name$="hzw"]`，选择其 `name` 属性以 `hzw` 结尾的所有元素。 ```css [name$='hzw'] { background: red; } ``` ![未命名文件 (7).png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c91fdfc40d04acd92f31b6357401f60~tplv-k3u1fbpfcp-watermark.image?) ### [attr*=value] 示例：`[name*="hzw"]`，选择其 `name` 属性值中包含 `hzw` 子串的所有元素。无限制。 ```css [name*='hzw'] { background: red; } ``` ![未命名文件 (8).png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/efd227b0cae0407c921594d1346fc5de~tplv-k3u1fbpfcp-watermark.image?) ## 12.伪类选择器伪类表示被选择元素的某种状态。 > **:active** 匹配用户正在激活（例如点击）元素。 > **:any-link** 匹配一个链接的`:link`和`:visited`状态。 > **:blank** 匹配空输入值的 `input` 元素。 > **:checked** 匹配处于选中状态的单选或者复选框。 > **:current** 匹配正在展示的元素，或者其上级元素。 > **:default** 匹配一组相似的元素中默认的一个或者更多的 `UI` 元素。 > **:dir** 基于其方向性（ `HTML dir` 属性或者 `CSS direction` 属性的值）匹配一个元素。 > **:disabled** 匹配处于关闭状态的用户界面元素。 > **:empty** 匹配除了可能存在的空格外，没有子元素的元素。 > **:enabled** 匹配处于开启状态的用户界面元素。 > **:first** 匹配分页媒体的第一页。 > **:first-child** 匹配兄弟元素中的第一个元素。 > **:first-of-type** 匹配兄弟元素中第一个某种类型的元素。 > **:focus** 当一个元素有焦点的时候匹配。 > **:focus-visible** 当元素有焦点，且焦点对用户可见的时候匹配。 > **:focus-within** 匹配有焦点的元素，以及子代元素有焦点的元素。 > **:future** 匹配当前元素之后的元素。 > **:hover** 当用户悬浮到一个元素之上的时候匹配。 > **:indeterminate** 匹配未定态值的UI元素，通常为复选框。 > **:in-range** 用一个区间匹配元素，当值处于区间之内时匹配。 > **:invalid** 匹配诸如 `input` 的位于不可用状态的元素。 > **:lang** 基于语言（ `HTMLlang` 属性的值）匹配元素。 > **:last-child** 匹配兄弟元素中最末的那个元素。 > **:last-of-type** 匹配兄弟元素中最后一个某种类型的元素。 > **:left** 在分页媒体中，匹配左手边的页。 > **:link** 匹配未曾访问的链接。 > **:local-link** 匹配指向和当前文档同一网站页面的链接。 > **:is()** 匹配传入的选择器列表中的任何选择器。 > **:not** 匹配作为值传入自身的选择器未匹配的物件。 > **:nth-child** 匹配一列兄弟元素中的元素——兄弟元素按照 `an+b` 形式的式子进行匹配（比如 `2n+1` 匹配元素 `1`、`3`、`5`、`7` 等。即所有的奇数个）。 > **:nth-of-type** 匹配某种类型的一列兄弟元素（比如 `p` 元素）——兄弟元素按照 `an+b` 形式的式子进行匹配（比如 `2n+1` 匹配元素 `1`、`3`、`5`、`7`等。即所有的奇数个）。 > **:nth-last-child** 匹配一列兄弟元素，从后往前倒数。兄弟元素按照 `an+b` 形式的式子进行匹配（比如 `2n+1` 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 > **:nth-last-of-type** 匹配某种类型的一列兄弟元素（比如 `p` 元素），从后往前倒数。兄弟元素按照 `an+b` 形式的式子进行匹配（比如 `2n+1` 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 > **:only-child** 匹配没有兄弟元素的元素。 > **:only-of-type** 匹配兄弟元素中某类型仅有的元素。 > **:optional** 匹配不是必填的 `form` 元素。 > **:out-of-range** 按区间匹配元素，当值不在区间内的的时候匹配。 > **:past** 匹配当前元素之前的元素。 > **:placeholder-shown** 匹配显示占位文字的input元素。 > **:playing** 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。 > **:paused** 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。 > **:read-only** 匹配用户不可更改的元素。 > **:read-write** 匹配用户可更改的元素。 > **:required** 匹配必填的 `form` 元素。 > **:right** 在分页媒体中，匹配右手边的页。 > **:root** 匹配文档的根元素。 > **:scope** 匹配任何为参考点元素的的元素。 > **:valid** 匹配诸如 `input` 元素的处于可用状态的元素。 > **:target** 匹配当前 `URL` 目标的元素（例如如果它有一个匹配当前 `URL` 分段的元素）。 > **:visited** 匹配已访问链接。 ## 13.伪元素选择器伪元素表示的是被选择元素的某个部分，但是是只存在于 `CSS` 中的"假元素"，不出现在 `HTML` 中，所以叫"伪"元素。 > **::after** 匹配出现在原有元素的实际内容之后的一个可样式化元素。 > **::before** 匹配出现在原有元素的实际内容之前的一个可样式化元素。 > **::first-letter** 匹配元素的第一个字母。 > **::first-line** 匹配包含此伪元素的元素的第一行。 > **::grammar-error** 匹配文档中包含了浏览器标记的语法错误的那部分。 > **::selection** 匹配文档中被选择的那部分。 > **::spelling-error** 匹配文档中包含了浏览器标记的拼写错误的那部分。 ## 选择器的权重既然我们的 `CSS` 选择器有这么多种，那么我们怎么知道谁生效谁无效呢？那就要通过权重来计算了。`CSS` 选择器的权重计算遵循以下规则： - 选择器的权重可以相加，数值越大，权重越大，两种选择器覆盖同一属性时，权重大的选择器生效； - 通配符选择器的权重为 `0` ； - 标签选择器、伪元素选择器：`1`； - 类选择器、伪类选择器、属性选择器：`10`， - `id` 选择器：`100`； - 内联样式：`1000`； - `!important` 声明的样式的权重最高； - 继承得到的样式的权重最低； - 由于 `HTML` 代码的执行特点时从上往下执行，因此在权重相同的情况下，后面的选择器会覆盖前面的选择器相同的属性； - **伪类选择器**和**属性选择器**的权重相当于类选择器的权重，**伪元素选择器**的权重相当于元素选择器的权重； - 子代，后代和兄弟有可能是元素选择器、类选择器、id选择器，因此要根据具体情况来具体分析。 - `CSS` 里面的进制并不是 `10` 进制，而是 `256` 进制，所以 `10` 个低级选择器并不能等于 `1` 个高级选择器。 - 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。 ## 参考文献 [CSS选择器](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)