玩过前端的一般都会接触CSS选择器。在CSS中，选择器是选取需设置样式的元素的模式。
CSS选择器可以分成这些大类：
- 基本选择器
- 复合选择器
- 伪类选择器
- 伪元素选择器
每个大类中又可以细分一些具体的选择器。
1.1 基本选择器-通配选择器
通配符选择器常用 “*”号表示，它是所有选择器里作用范围最广的，能匹配所有的HTML元素。
语法：
{
属性名: 属性值;
}举例：
最终效果：
初看感觉这个通配选择器很鸡肋，但是到后面清除样式时，会起到比较大的作用，暂时先不用管，只要了解一下有这个选择器就行。
1.2 基本选择器-元素选择器
元素选择器是指用HTML标签名称作为选择器，按标记元素分类，为页面中某一类标签指定统一的CSS样式。
语法：
标签名 {
属性名: 属性值;
}举例：
最终效果：
元素选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能实现差异化设置，就像上面的例子，所有p标签都受到了影响。
1.3 基本选择器-类选择器
类选择器的作用是根据元素的class值，来选中某些元素。
语法：
.类名 {
属性名: 属性值;
}举例：
最终效果：
类选择器有这些注意事项：
- 元素的class属性值不带“.”，但是CSS的类选择器要带“.”；
- class值，是我们自定义的，按照标准，不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用-做连接，例如：left-menu，且命名要有意义，做到“见名知意”；
- 一个元素不能写多个class属性；
- 一个元素的class属性，能写多个值，要用空格隔开。
1.4 基本选择器-id选择器
id选择器的作用是根据元素的id属性值，来准确的选中某一个元素。
语法：
#id值 {
属性名: 属性值;
}举例：
最终效果：
id选择器有这些注意事项：
- id属性值尽量由字母、数字、下划线(_)、短杠(-)组成，最好以字母开头，不要包含空格、区分大小写；
- 一个元素只能拥有一个id属性，多个元素的id属性值不能相同；
- 一个元素可以同时拥有id和class属性。
有些较真的同学可能会说多个元素写了相同的id，浏览器也能正常渲染。但是实际工作开发中一般都需要用js写一些具体的业务逻辑，这个时候遇到两个拥有相同id的元素，就会比较崩溃。
2.1 复合选择器-交集选择器
交集选择器的作用是选中同时符合多个条件的元素。交集有并且的含义，通俗理解：即...又...
语法：
选择器1选择器2选择器3...选择器n {
属性名: 属性值;
}举例：
最终效果：
交集选择器有这些注意事项：
- 有标签名，标签名必须写在前面；
- id选择器理论上可以作为交集选择器的条件，但实际应用中几乎不用，因为没有意义；
- 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素；
- 用的最多的交集选择器是：元素选择器配合类名选择器，例如上面例子中 h2.backend
2.2 复合选择器-并集选择器
并集选择器的作用是选中多个选择器对应的元素，又称分组选择器。所谓并集就是或者的含义，通俗理解：要么...要么
语法：
选择器1,选择器2,选择器3,选择器n {
属性名: 属性值;
}举例：
最终效果：
并集选择器有这些注意事项：
- 并集选择器一般竖着写；
- 任何形式的选择器，都可以作为并集选择器的一部分；
- 并集选择器，通常用于集体声明，可以缩小样式表体积。
2.3 复合选择器-后代选择器
后代选择器的作用是选中指定元素中，符合要求的后代元素。
语法：
选择器1 选择器2 选择器3 选择器n {
属性名: 属性值;
}举例：
最终效果：
后代选择器有几个注意事项：
- 后代选择器，最终选择的是后代，不会将过程中的祖先一起选中；
- 儿子、孙子、重孙子，都算是后代；
- 结构一定要复合的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。
2.4 复合选择器-子代选择器
子代选择器的作用是选中指定元素中符合要求的子元素（儿子元素）。
语法：
选择器1>选择器2>选择器3>... 选择器n {
属性名: 属性值;
}举例：
最终效果：
子代选择器有以下注意点：
- 子代选择器，最终选中的是子代，不是父级；
- 子、孙子、重孙子、重重孙子...统称后代，子就是指儿子。（和后代选择器的区别）
2.5 复合选择器-相邻兄弟选择器
相邻兄弟选择器的作用是选中指定元素后，符合条件的相邻兄弟元素。
所谓相邻，就是紧挨着该元素的下一个，可以理解成睡在我下铺的兄弟。
语法：
选择器1+选择器2 {
属性名: 属性值;
}举例：
最终效果：
有一点需要注意，相邻兄弟选择器选择的是下面的兄弟。
2.6 复合选择器-通用兄弟选择器
通用兄弟选择器的作用是选中指定元素后，符合条件的所有兄弟元素。可以理解成虽在我下铺的所有兄弟。
语法：
选择器1~选择器2 {
属性名: 属性值;
}举例：
最终效果：
也需要注意，通用兄弟选择器选择的是下面的兄弟，和相邻兄弟选择器是一样的。
2.7 复合选择器-属性选择器
属性选择器的作用是选中属性符合一定要求的元素。
语法：
# 选中具有某个属性的元素
[属性名] {
属性名: 属性值;
}
# 选中包含某个属性，且属性值等于指定值的元素
[属性名="值"] {
属性名: 属性值;
}
# 选中包含某个属性，且属性值以指定的值开头的元素
[属性名^="值"] {
属性名: 属性值;
}
# 选中包含某个属性，且属性值以指定的值结尾的元素
[属性名$="值"] {
属性名: 属性值;
}
# 选中包含某个属性，且属性值包含指定值的元素
[属性名*="值"] {
属性名: 属性值;
}举例：
最终效果：
3 伪类选择器
伪类选择器的作用是选中特殊状态的元素。其中伪是指虚假的，不是真的。所以伪类可以理解成像类（class），但不是类，是元素的一种特殊状态。
3.1 伪类选择器-动态伪类
是比较常用的伪类选择器类型。
语法：
:link 超链接未被访问的状态
:visited 超链接访问过的状态
:hover 鼠标悬停在元素上的状态
:active 元素激活的状态
:focus 获取焦点的元素举例：
最终效果：
3.2 伪类选择器-结构伪类
结构伪类之所以这样命名，是因为需要先确定元素结构，根据结构选择特定的元素。
常用的语法：
:first-child 所有兄弟元素中的第一个
:last-child 所有兄弟元素中的最后一个
:nth-child(n) 所有兄弟元素中的第n个
:first-of-type 所有同类型兄弟元素中的第一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所哟同类型兄弟元素中的第n个
:nth-last-child(n) 所有兄弟元素中的倒数第n个
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
:only-child 选择没有兄弟的元素（独生子女）
:only-of-type 选择没有同类型兄弟的元素
:root 根元素
:empty 内容为空元素（空格也算内容）关于n的值：
- 0或不写：什么都选不中 -- 几乎不用；
- n：选中所有子元素 -- 几乎不用；
- 1~正无穷的整数：选中所对应序号的子元素；
- 2n 或 even：选中序号为偶数的子元素；
- 2n+1 或 odd：选中序号为奇数的子元素；
- -n+3：选中前3个。
举例：
最终效果：
3.3 伪类选择器-否定伪类
否定伪类的作用是排除满足条件的元素。
语法：
:not(选择器) 排除满足括号中条件的元素举例：
最终效果：
3.4 伪类选择器-UI伪类
用来选中特定状态的UI，和前面介绍的动态伪类有点类似。
语法：
:checked 被选中的复选框或单选按钮
:enable 可用的表单元素（没有disabled属性）
:disabled 不可用的表单元素（有disabled属性）举例：
最终效果：
3.5 伪类选择器-目标伪类
目标伪类的作用是选中锚点指向的元素。
语法：
:target 选中锚点指向的元素举例：
最终效果：
3.6 伪类选择器-语言伪类
语言伪类的作用是选中特定语言的目标，当然不是根据内容自动判定语言类型，而是通过lang这个属性。
语法：
:lang() 根据指定的语言选择元素（本质是看lang属性的值）举例：
最终效果：
4 伪元素选择器
伪元素选择器的作用是选中元素中的一些特殊位置。
常用伪元素：
::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字
::before 在元素最开始的位置，创建一个子元素（必须用content属性指定内容）
::after 在元素最后的位置，创建一个子元素（必须用content属性指定内容）举例：
最终效果：
总结
以上就是CSS选择器的介绍，初看好像很多，不过多用几次很快就能记住。CSS选择器的功能非常丰富，合理使用合适的选择器，会让代码的可靠性得到保障。