玩过前端的一般都会接触CSS选择器。在CSS中，选择器是选取需设置样式的元素的模式。

CSS选择器可以分成这些大类：

1. 基本选择器
2. 复合选择器
3. 伪类选择器
4. 伪元素选择器

每个大类中又可以细分一些具体的选择器。

1.1 基本选择器-通配选择器

通配符选择器常用 “*”号表示，它是所有选择器里作用范围最广的，能匹配所有的HTML元素。

语法：

	 {        属性名: 属性值;      }

举例：

最终效果：

初看感觉这个通配选择器很鸡肋，但是到后面清除样式时，会起到比较大的作用，暂时先不用管，只要了解一下有这个选择器就行。

1.2 基本选择器-元素选择器

元素选择器是指用HTML标签名称作为选择器，按标记元素分类，为页面中某一类标签指定统一的CSS样式。

语法：

	标签名 {        属性名: 属性值;      }

举例：

最终效果：

元素选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能实现差异化设置，就像上面的例子，所有p标签都受到了影响。

1.3 基本选择器-类选择器

类选择器的作用是根据元素的class值，来选中某些元素。

语法：

.类名 {        属性名: 属性值;      }

举例：

最终效果：

类选择器有这些注意事项：

1. 元素的class属性值不带“.”，但是CSS的类选择器要带“.”；
2. class值，是我们自定义的，按照标准，不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用-做连接，例如：left-menu，且命名要有意义，做到“见名知意”；
3. 一个元素不能写多个class属性；
4. 一个元素的class属性，能写多个值，要用空格隔开。

1.4 基本选择器-id选择器

id选择器的作用是根据元素的id属性值，来准确的选中某一个元素。

语法：

#id值 {        属性名: 属性值;      }

举例：

最终效果：

id选择器有这些注意事项：

1. id属性值尽量由字母、数字、下划线(_)、短杠(-)组成，最好以字母开头，不要包含空格、区分大小写；
2. 一个元素只能拥有一个id属性，多个元素的id属性值不能相同；
3. 一个元素可以同时拥有id和class属性。

有些较真的同学可能会说多个元素写了相同的id，浏览器也能正常渲染。但是实际工作开发中一般都需要用js写一些具体的业务逻辑，这个时候遇到两个拥有相同id的元素，就会比较崩溃。

2.1 复合选择器-交集选择器

交集选择器的作用是选中同时符合多个条件的元素。交集有并且的含义，通俗理解：即…又…

语法：

选择器1选择器2选择器3...选择器n {        属性名: 属性值;      }

举例：

最终效果：

交集选择器有这些注意事项：

1. 有标签名，标签名必须写在前面；
2. id选择器理论上可以作为交集选择器的条件，但实际应用中几乎不用，因为没有意义；
3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素；
4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如上面例子中 h2.backend

2.2 复合选择器-并集选择器

并集选择器的作用是选中多个选择器对应的元素，又称分组选择器。所谓并集就是或者的含义，通俗理解：要么…要么

语法：

选择器1,选择器2,选择器3,选择器n {        属性名: 属性值;      }

举例：

最终效果：

并集选择器有这些注意事项：

1. 并集选择器一般竖着写；
2. 任何形式的选择器，都可以作为并集选择器的一部分；
3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

2.3 复合选择器-后代选择器

后代选择器的作用是选中指定元素中，符合要求的后代元素。

语法：

选择器1 选择器2 选择器3 选择器n {        属性名: 属性值;      }

举例：

最终效果：

后代选择器有几个注意事项：

1. 后代选择器，最终选择的是后代，不会将过程中的祖先一起选中；
2. 儿子、孙子、重孙子，都算是后代；
3. 结构一定要复合的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

2.4 复合选择器-子代选择器

子代选择器的作用是选中指定元素中符合要求的子元素（儿子元素）。

语法：

选择器1>选择器2>选择器3>... 选择器n {        属性名: 属性值;      }

举例：

最终效果：

子代选择器有以下注意点：

1. 子代选择器，最终选中的是子代，不是父级；
2. 子、孙子、重孙子、重重孙子…统称后代，子就是指儿子。（和后代选择器的区别）

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的值：

1. 0或不写：什么都选不中 — 几乎不用；
2. n：选中所有子元素 — 几乎不用；
3. 1~正无穷的整数：选中所对应序号的子元素；
4. 2n 或 even：选中序号为偶数的子元素；
5. 2n+1 或 odd：选中序号为奇数的子元素；
6. -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选择器的功能非常丰富，合理使用合适的选择器，会让代码的可靠性得到保障。