CSS选择器是一种模式，用于选择需要应用样式的HTML元素。CSS选择器的种类繁多，它们可以根据元素的名称、属性、属性值、文档的结构，甚至是元素的状态来选取元素。以下是CSS选择器的一个详尽介绍，包括各种伪类选择器的使用。
1. 基本选择器
- 通用选择器（
*）：选取所有元素。 - 元素类型选择器：根据元素名称选择，如
div、p。 - 类选择器（
.classname）：选取特定类的元素。 - ID选择器（
#idname）：选取特定ID的元素。 - 属性选择器：根据元素的属性及其值来选择，如
[type="text"]。
2. 组合选择器
- 后代选择器（
A B）：选择A元素内的所有B元素。 - 子代选择器（
A > B）：选择A元素的直接子元素B。 - 相邻兄弟选择器（
A + B）：选择紧接在A元素之后的同级B元素。 - 一般兄弟选择器（
A ~ B）：选择A元素之后的所有同级B元素。
3. 伪类选择器
伪类选择器用于选择元素的特定状态。
- 链接伪类：
:link：选择所有未访问的链接。:visited：选择用户已访问的链接。:hover：当鼠标悬停在元素上时。:active：选择激活的链接。
- 表单伪类：
:focus：选择获得焦点的表单元素。:disabled：选择被禁用的表单元素。:checked：选择被选中的表单元素（如复选框或单选按钮）。:focus-within：当元素或其任何子元素获得焦点时，该选择器生效。:valid/:invalid：这些选择器用于HTML5表单验证，分别选择有效或无效的输入元素。:required/:optional：分别选择表单中设置了required属性的元素和没有设置required属性的元素。:read-only/:read-write：分别选择只读和可编辑的表单元素。
- 结构伪类：
:first-child、:last-child：选择父元素的第一个或最后一个子元素。:nth-child(n)：选择父元素的第n个子元素。:nth-last-child(n)：选择父元素的倒数第n个子元素。:only-child：选择父元素的唯一子元素。
- 否定伪类：
:not(selector)：选择非特定选择器的元素。
除开以上伪类选择器还有以下基于元素类型在其父元素中的位置来选择元素。
:nth-of-type(n)：选择父元素中第n个特定类型的子元素。例如，p:nth-of-type(2)会选择父元素中的第二个<p>元素。:nth-last-of-type(n)：选择父元素中倒数第n个特定类型的子元素。这与:nth-of-type相似，但计数是从元素列表的末尾开始的。:first-of-type：选择父元素中特定类型的第一个子元素。例如，div:first-of-type会选择每个父元素中的第一个<div>元素。:last-of-type：选择父元素中特定类型的最后一个子元素。与:first-of-type相对，它定位于每组子元素中的最后一个。
4. 伪元素选择器
伪元素选择器用于选择元素的特定部分。
::before：在元素内容之前添加内容。::after：在元素内容之后添加内容。::first-letter：选择块级元素的第一个字母。::first-line：选择块级元素的第一行。::selection：选择用户选择的元素部分。::placeholder：选择表单输入字段中的占位符文本。::marker：选择列表项标记。
5. 其他选择器
- 属性选择器：根据特定属性及其值进行选择。
[attribute^=value]：选择属性值以指定值开头的每个元素。[attribute$=value]：选择属性值以指定值结尾的每个元素。[attribute*=value]：选择属性值中包含指定值的每个元素。
:empty：选择没有任何子元素（包括文本节点）的元素。:root：选择文档的根元素，通常是<html>。:lang()：根据元素的语言设置选择元素。例如，:lang(en)会选择所有语言设置为英语的元素。
结论
CSS选择器是网页设计中的重要工具，它们允许开发者根据不同的条件来选择和样式化HTML元素。通过选择器按类、ID、标签名、属性以及使用伪类选择器，我们可以更加精确地控制网页的样式和交互效果。熟练使用各种选择器能够帮助开发者更高效地编写CSS代码，实现丰富多样的网页开发需求。
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
