携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情
前言
前面我们可能已经有了选择器的概念，知道它可以用来选择某个或某些html元素。本文将对选择器进行系统的讲解以便读者对于选择器有完整的认识。
选择器
什么是选择器？
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
选择器列表
既然可以使用单独的选择器，那么这些单独的选择器当然也可以可以被混编为一个“选择器列表”。例如h1,p，h1 p，但要注意了当单个选择器无效时，组合的选择器也会失效，例如h1,..special(x)
选择器的种类
1.类型、类和ID选择器
此类选择器是最常用的最简单的选择器，接下来让我们来看看。
类型选择器
类型选择器也叫做标签选择器或者元素选择器，例如h1、p、span、div。
h1{
color:red;
}
全局选择器
全局选择器用*号表示，用来表示文档的所有内容。也可用于选择器列表中让选择器更易读，例如p :first-child（中间带空格）容易与p:first-child混淆，前者表示p后代的任何第一个子元素，而后者表示作为其他元素的第一子元素的p元素。
*{
margin:0;
}
类选择器
类选择器以.起头，后面带一个类名。可以单独使用，也可指向特定元素，例如h1.special（其间不带空格）
h1.special{
background-color: pink;
}
ID选择器
ID选择器以#起头，后面带一个id名。与类相似也可指向特定元素h1#special。但id选择器通常用来作为唯一的标识而使用，也就是只用一次不会改变，所以更通常我们会用类选择器。
h1#special{
background-color: pink;
}
2.属性选择器
在编写html元素时我们知道元素可以带有属性，那么我们便可以凭借此来选择某些元素。下面我们通过一个列表来展示。
| 选择器 | 示例 | 描述 | |
|---|---|---|---|
[*attr*] | li[class] | 匹配带有一个名为class的属性的li元素。 | |
[*attr*=*value*] | li[class="special"] | 匹配带有一个名为class的属性的li元素，其值为special。 | |
[*attr*~=*value*] | li[class~="special"] | 匹配带有一个名为class的属性的li元素，其值为special，或者匹配带有一个class属性的元素，其值有一个或者更多至少有一个和special匹配。例如<p class="a b c special">（注意，在一列中的好几个值，是用空格隔开的）。 | |
[*attr*^=*value*] | li[class^="box-"] | 匹配带有一个名为class的属性的元素，其值开头为*box-*子字符串。 | |
[*attr*$=*value*] | li[class$="-box"] | 匹配带有一个名为class的属性的元素，其值结尾为*-box*子字符串 | |
*attr**=*value*] | li[class*="box"] | 匹配带有一个名为class的属性的元素，其值的字符串中的任何地方，至少出现了一次box子字符串。 |
我们通过表格中的示例来实操一下
<ul>
<li class="special">Item 1</li>
<li class="a special">Item 2</li>
<li class="bca">Item 3</li>
<li class="bcabc">Item 4</li>
</ul>
li[class] {
font-size: 20px;
}
li[class="special"] {
background-color: yellow;
}
li[class~="special"] {
color: red;
}
li[class^="a"] {
font-size: 30px;
}
li[class$="a"] {
background-color: blue;
}
li[class*="a"] {
color: green;
}
效果：
3.伪类与伪元素
什么是伪类？
类一般是对对象行为与方法的具体概括。伪类也类似，它用于特定状态下的元素，例如鼠标悬浮，链接访问等。
li:first-child选择了紧靠li的第一个子元素，first-child表示第一子元素的一种状态。与之相对的last-child就表示最后一个子元素。
用户行为伪类
当一个链接从点击到点击后时有好几种状态，例如
a:hover：鼠标悬浮于a上时
a:link：未访问链接时的状态
a:visited：访问链接后的状态
a:active：鼠标点击时的状态
什么是伪元素？
伪元素表现得像你往html文件中加入新的元素一样，通常以::+伪类名来表示。
备注： 一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。
下面是一些伪类与伪元素的参考
伪类
| 选择器 | 描述 |
|---|---|
:active | 在用户激活（例如点击）元素的时候匹配。 |
:any-link | 匹配一个链接的:link和:visited状态。 |
:blank | 匹配空输入值的``元素。 |
:checked | 匹配处于选中状态的单选或者复选框。 |
:current (en-US) | 匹配正在展示的元素，或者其上级元素。 |
:default | 匹配一组相似的元素中默认的一个或者更多的 UI 元素。 |
:dir | 基于其方向性（HTMLdir属性或者 CSSdirection属性的值）匹配一个元素。 |
:disabled | 匹配处于关闭状态的用户界面元素 |
:empty | 匹配除了可能存在的空格外，没有子元素的元素。 |
:enabled | 匹配处于开启状态的用户界面元素。 |
:first | 匹配分页媒体的第一页。 |
:first-child | 匹配兄弟元素中的第一个元素。 |
:first-of-type | 匹配兄弟元素中第一个某种类型的元素。 |
:focus | 当一个元素有焦点的时候匹配。 |
:focus-visible | 当元素有焦点，且焦点对用户可见的时候匹配。 |
:focus-within | 匹配有焦点的元素，以及子代元素有焦点的元素。 |
:future (en-US) | 匹配当前元素之后的元素。 |
:hover | 当用户悬浮到一个元素之上的时候匹配。 |
:indeterminate | 匹配未定态值的 UI 元素，通常为复选框。 |
:in-range | 用一个区间匹配元素，当值处于区间之内时匹配。 |
:invalid | 匹配诸如<input>的位于不可用状态的元素。 |
:lang | 基于语言（HTMLlang属性的值）匹配元素。 |
:last-child | 匹配兄弟元素中最末的那个元素。 |
:last-of-type | 匹配兄弟元素中最后一个某种类型的元素。 |
:left | 在分页媒体 (en-US)中，匹配左手边的页。 |
:link | 匹配未曾访问的链接。 |
:local-link (en-US) | 匹配指向和当前文档同一网站页面的链接。 |
: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 (en-US) | 匹配当前元素之前的元素。 |
:placeholder-shown | 匹配显示占位文字的 input 元素。 |
:playing (en-US) | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。 |
:paused (en-US) | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。 |
:read-only | 匹配用户不可更改的元素。 |
:read-write | 匹配用户可更改的元素。 |
:required | 匹配必填的 form 元素。 |
:right | 在分页媒体 (en-US)中，匹配右手边的页。 |
:root | 匹配文档的根元素。 |
:scope | 匹配任何为参考点元素的的元素。 |
:valid | 匹配诸如<input>元素的处于可用状态的元素。 |
:target | 匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）。 |
:visited | 匹配已访问链接。 |
伪元素
| 选择器 | 描述 |
|---|---|
::after | 匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
::before | 匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
::first-letter | 匹配元素的第一个字母。 |
::first-line | 匹配包含此伪元素的元素的第一行。 |
::grammar-error | 匹配文档中包含了浏览器标记的语法错误的那部分。 |
::selection | 匹配文档中被选择的那部分。 |
::spelling-error | 匹配文档中包含了浏览器标记的拼写错误的那部分。 |
4.关系选择器
什么是关系选择器？
通过关系符，我们可以将前后两种元素建立联系，通过这样建立的选择器叫做关系选择器。
后代选择器
通过``空格来组合选择器。例如A B表示的关系是选择所有以A选择器为祖先（父亲、父亲的父亲等等..）的B选择器。我们通过一个简单的小例子来说明。
<p>
<em>aaaa</em>
bbbb
<em>aaaaa</em>
</p>
<p>
<em>ccccc</em>
<span>dddd <em>eeee</em> dddd</span>
</p>
p em {
color: red;
}
结果是p元素里的所有em都被选择到了
子代关系选择器
通过 >来组合选择器。例如A>B表示的关系是选择所有以A选择器为父亲的B选择器。
邻接兄弟选择器
通过 +来组合选择器。例如 A+B表示的关系是选择所有紧随A选择器之后的B选择器。
通用兄弟选择器
通过 ~来组合选择器。例如 A~B表示的关系是选择所有A选择器之后的同级B选择器
选择器的权重
从上面我们已知道了有哪些选择器，但有时候他们组合成一个选择器列表时我们会不知道哪个优先，这个时候就需要引入一个权重的概念以此计算选择器的优先级。
- 第一等：代表内联样式，如: style=””，权值为1000。
- 第二等：代表ID选择器，如：#content，权值为0100。
- 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
- 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
- 继承的样式没有权值。
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示
例如div #span>.class>.class1有1个ID选择器，2个类选择器，一个类型选择器，他的权重就是0121。
当权重相同时则越后面优先级越高。
总结
以上就是所有关于CSS选择器的内容了，下面我们将会针对CSS的盒模型进行讲解。
