CSS中的许多伪选择器

CSS（层叠样式表）中的伪选择器是用于选择文档中某些特定元素的一种方式。伪选择器的语法为 : 再加上选择器的名称，如 :hover，:nth-child等等。伪选择器可以用于选择元素的不同状态或位置，从而改变它们的外观或行为。

下面是CSS中的一些常见伪选择器及其用法：

1. :hover

:hover 伪选择器用于选择鼠标悬停在元素上时的状态，通常用于改变元素的颜色、背景色或添加特效等。例如：

a:hover {
  color: red;
}

这条CSS规则将在鼠标移动到链接上时将链接的颜色改为红色。

2. :focus

:focus 伪选择器用于选择元素获得用户输入焦点时的状态，通常应用于表单元素，如文本框、密码框等。例如：

input[type="text"]:focus {
  border: 2px solid blue;
}

这条CSS规则将在用户点击文本框时，将文本框的边框颜色改为蓝色。

3. :active

:active 伪选择器用于选择元素被鼠标点击时的状态，通常应用于链接、按钮等元素。例如：

button:active {
  background-color: yellow;
}

这条CSS规则将在用户点击按钮时，将按钮的背景颜色改为黄色。

4. :first-child

:first-child 伪选择器用于选择元素的第一个子元素，例如：

ul li:first-child {
  font-weight: bold;
}

这条CSS规则将使每个 ul 列表的第一个子元素为加粗。

5. :last-child

:last-child 伪选择器用于选择元素的最后一个子元素，例如：

ul li:last-child {
  font-style: italic;
}

这条CSS规则将使每个 ul 列表的最后一个子元素为斜体。

6. :nth-child

:nth-child(n) 伪选择器用于选择元素的第 n 个子元素，例如：

ul li:nth-child(odd) {
  background-color: lightgray;
}

这条CSS规则将使每个 ul 列表的奇数行的背景颜色为灰色。

7. :nth-of-type

:nth-of-type(n) 伪选择器用于选择属于相同类型的元素中的第 n 个元素，例如：

p:nth-of-type(2) {
  font-size: 20px;
}

这条CSS规则将使文档中第二个 <p> 元素的字体大小为 20px。

8. :not

:not(selector) 伪选择器用于选择不符合 selector 选择器的元素，例如：

p:not(.highlight) {
  color: gray;
}

这条CSS规则将使除了 class 值为 highlight 的 <p> 元素以外，其它的 <p> 元素字体颜色为灰色。

9. :lang

:lang(language) 伪选择器用于选择符合特定语言的元素，例如：

:lang(en) {
  color: blue;
}

这条CSS规则将使使用英语作为页面语言的文本颜色为蓝色。

总结：CSS中的伪选择器为开发人员提供了一种更加灵活的选择元素的方式，可以通过选择不同的状态或位置来改变元素的样式或行为。掌握常见的伪选择器可以帮助你更加高效地编写CSS代码。