什么是CSS伪选择器
在学习伪类选择器之前，我们需要了解什么是CSS伪选择器。CSS伪选择器是用来选取某些元素的状态或者位置的选择器，通过在选择器后面加上特殊符号:来表示。伪选择器是一种用来选择匹配特定条件的元素的CSS选择器，选择这些元素的条件是无法用普通选择器表示的，例如某个元素是否为鼠标指针悬停状态下的元素。
伪类选择器
1. 链接状态选择器a:link
链接状态选择器用来选择那些附加了链接的元素，如未被访问过的链接、访问过的链接以及正在被访问的链接等。链接状态的指示是由浏览器中访问过链接的历史记录得出的。
/*选择所有未被访问的链接*/
a:link {
color: red;
text-decoration: none;
}
上述代码实现了所有未被访问的链接文字颜色为红色，下划线去掉。同样，我们可以使用a:visited选择器来选取所有访问过的链接。
2. 悬停状态选择器a:hover
悬停状态选择器选取那些处于鼠标悬停状态下的元素。鼠标悬停状态是通过鼠标移动到元素上方而产生的状态。
/*悬停状态下鼠标形状变为手型*/
a:hover {
cursor: pointer;
}
3. 聚焦状态选择器input:focus
聚焦状态选择器用来选取当前元素处于聚焦状态的元素。当用户点击元素或者使用键盘上的Tab键移动到该元素时，元素就会处于聚焦状态。
/*输入框在聚焦状态下边框加粗，背景色为蓝色*/
input:focus {
border: 2px solid black;
background-color: blue;
}
4. 第一个子元素选择器:first-child
第一个子元素选择器用来选取某个元素的第一个子元素。注意，该子元素不是特定类型的元素，可以是任意类型的元素。
/*每一个段落的第一个子元素为粗体*/
p:first-child {
font-weight: bold;
}
5. 最后一个子元素选择器:last-child
最后一个子元素选择器用来选取某个元素的最后一个子元素。
/*每一个段落的最后一个子元素为粗体*/
p:last-child {
font-weight: bold;
}
6. 奇数/偶数元素选择器:nth-child(odd/even)
奇数/偶数元素选择器用来选取某个元素下的奇数或者偶数元素，可以通过odd或者even来指定。
/*列表中的奇数元素背景色为#f2f2f2*/
li:nth-child(odd) {
background-color: #f2f2f2;
}
/*列表中的偶数元素背景色为#ffffff*/
li:nth-child(even) {
background-color: #ffffff;
}
7. 第一个字母选择器:first-letter
第一个字母选择器用来选取某个元素的内容中的第一个字母，并且对该字母进行样式设置。
/*每一个段落的第一个字母加大*/
p:first-letter {
font-size: 30px;
}
8. 未选中状态选择器:not(selected)
未选中状态选择器用来选取除了指定元素之外的所有元素。
/*除了被选中之外的所有元素颜色为红色*/
input:not(:checked) {
color: red;
}
9. 相邻兄弟选择器+
相邻兄弟选择器用来选取指定元素之后紧跟着的一个同级元素（紧跟着的指的是在HTML文档中出现的位置）。
/*被点击按钮之后紧跟着的下一个元素颜色为蓝色*/
button + p {
color: blue;
}
10. 通用兄弟选择器~
通用兄弟选择器和相邻兄弟选择器类似，但是相比相邻兄弟选择器，选中元素之后的兄弟元素无需紧跟着，只要是同级元素并出现在选中元素之后即可。
/*被点击按钮之后所有同级元素颜色为橘黄色*/
button ~ p {
color: orange;
}
伪元素选择器
1. 第一个字母::first-letter
第一个字母选取器用来选取某个元素内容中的第一个字符，并对该字符应用样式。
/*所有段落内容中的第一个字母颜色为红色*/
p::first-letter {
color: red;
}
2. 第一行文本::first-line
第一行文本选择器用来选取某个元素内容的第一行，并对该行应用样式。
/*所有段落中第一行文字为粗体*/
p::first-line {
font-weight: bold;
}
3. 选取元素之前::before
选取元素之前选择器用来在某个元素之前插入内容，例如插入图标等。
/*在每一个标题之前插入一个图标*/
h2:before {
content: "\f023";
font-family: FontAwesome;
margin-right: 10px;
}
4. 选取元素之后::after
选取元素之后选择器用来在某个元素之后插入内容，例如插入引号等。
/*在每一个引用之后插入一个引号*/
blockquote::after {
content: "\201D";
}
总结
伪类选择器和伪元素选择器都是CSS中强大的选择器，它们可以让我们在选取元素时更加灵活和精确。在实际开发中，我们可以通过伪类选择器选取特定状态下的元素，并为其设置样式，例如:hover可以让鼠标悬停在元素上方时元素的样式发生变化，:first-child可以选取某个元素下的第一个子元素等，伪元素选择器则可以帮助我们选取元素内的特定内容并为其设置样式。