本文来系统的学习一下 CSS 选择器相关的内容。
1.id选择器
ID 选择器以 # 开头，它选择的是文档中 id 属性的值。
/* 这会让id等于app的元素的背景变为红色 */
#app {
background: red
}
/* 这会让id等于box的元素的背景变为绿色 */
#box {
background: green
}
2.类选择器
类选择器以一个句点（.）开头，它选择的是文档中应用了这个类的所有元素。
/* 这会让class等于app的元素的背景变为红色 */
.app {
background: red
}
/* 这会让class等于box的元素的背景变为绿色 */
.box {
background: green
}
3.标签选择器
有时也叫做 类型选择器 或者是 元素选择器，因为它在文档中选择的是 HTML 标签/元素。
/* 这会让所有的div标签的背景变为红色 */
div {
background: red
}
/* 这会让所有的span标签的背景变为蓝色 */
span {
background: blue
}
/* 这会让所有的p标签的背景变为绿色 */
p {
background: green
}
4.交集选择器
相交的部分就是要设置属性值的标签。选择器之间没有任何的连接符号（也不允许出现空格），选择器可以是标签名称，也可以是 id、class 名称。
/*
格式:
选择器1选择器2...{
属性:值;
}
*/
/* 这会让id等于app的div标签的背景变为红色 */
div#app {
background: red
}
/* 这会让class等于app的span标签的背景变为蓝色 */
span.app {
background: blue
}
/* 这会让id等于box的p标签的背景变为绿色 */
p#box {
background: green
}
5.并集选择器
并集选择器，选择器之间利用（，）连接，选择器可以是标签名称，也可以是 id、class 名称。
/*
格式:
选择器1选择器2...{
属性:值;
}
*/
/* 这会让所有的class等于app的标签以及所有的p标签的背景变为红色 */
.app,p {
background: red
}
6.通配符选择器
也称为“全局选择器”，由一个星号（*）代指，它选中了文档中的所有内容或者是父元素中的所有内容。
<style>
/* 这会让所有元素的背景变为红色 */
* {
background: red;
}
/* 这会让#app中所有元素的文字变为绿色 */
#app * {
color: green;
}
</style>
7.后代选择器
后代选择器，用单个空格（ ）字符组合两个选择器，匹配第祖先元素中所有的对应元素。
代码语言：javascript复制<style>
/* 这会让class=box的元素里面所有后代的div标签的背景变为红色 */
.box div {
background: red;
}
</style>
8.子代选择器
子代选择器，用单个大于号（>）组合两个选择器，只会在直接子元素中进行匹配。继承关系上更远的后代则不会匹配。
<style>
/* 这会让class=box的元素里面相邻后代（子代）所有的div标签的背景变为红色 */
.box > div {
background: red;
}
</style>
9.兄弟选择器
兄弟选择器，使用（~）组合两个选择器。但是要注意：
- 兄弟元素之间可以存在其他元素；
- 只能选择元素后面的兄弟元素。
<style>
/* 这会让span元素所有的兄弟p标签的背景变为红色 */
span ~ p {
background: red;
}
</style>
10.相邻兄弟选择器
兄弟选择器，使用（ ）组合两个选择器。但是要注意：
- 兄弟元素之间不可以存在其他元素；
- 只能选择元素后面的兄弟元素。
<style>
/* 这会让span元素的第一个兄弟p标签的背景变为红色 */
span p {
background: red;
}
</style>
11.属性选择器
顾名思义，是根据标签的属性进行选择的选择器，大概分为以下七种。
[attr]
示例：[name]，选择带有 name 属性的所有元素。
[name] {
background: red;
}
[attr=value]
示例：[name="hzw"]，选择 name 属性值等于 hzw 的所有元素。
[name='hzw'] {
background: red;
}
[attr~=value]
示例：[name~="hzw"]，选择 name 属性包含单词 hzw 的所有元素。注意：必须是整个单词，多个单词使用空格隔开。
[name~='hzw'] {
background: red;
}
[attr|=value]
示例：[name|="hzw"]，选择 name 属性值以 hzw 开头的所有元素。注意：必须是整个单词或者中间有连字符的单词。
[name|='hzw'] {
background: red;
}
[attr^=value]
示例：[name^="hzw"]，选择其 name 属性值以 hzw 开头的所有元素。无限制。
[name^='hzw'] {
background: red;
}
[attr$=value]
示例：[name$="hzw"]，选择其 name 属性以 hzw 结尾的所有元素。
[name$='hzw'] {
background: red;
}
[attr*=value]
示例：[name*="hzw"]，选择其 name 属性值中包含 hzw 子串的所有元素。无限制。
[name*='hzw'] {
background: red;
}
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选择器
