伪类选择器

伪类选择器（Pseudo-class Selector）是CSS中的一种特殊选择器，它用于选择元素的特定状态或位置。伪类选择器以冒号(:)开头，后跟伪类名称。

基本语法

伪类选择器的语法如下：

css

selector:pseudo-class {
  property: value;
}

其中，selector是基本选择器，pseudo-class是伪类名称。

常用伪类选择器

1. 动态伪类

动态伪类用于选择元素的动态状态，如鼠标悬停、焦点等。

:hover

选择鼠标悬停在上面的元素。

css

a:hover {
  color: red;
  text-decoration: underline;
}

:active

选择被用户激活（如点击）的元素。

css

a:active {
  color: green;
}

:focus

选择获得焦点的元素（如输入框）。

css

input:focus {
  border: 2px solid blue;
  outline: none;
}

:link

选择未被访问的链接。

css

a:link {
  color: blue;
}

:visited

选择已被访问的链接。

css

a:visited {
  color: purple;
}

2. 结构伪类

结构伪类用于选择元素在文档结构中的特定位置。

:first-child

选择作为其父元素第一个子元素的元素。

css

p:first-child {
  color: red;
}

:last-child

选择作为其父元素最后一个子元素的元素。

css

p:last-child {
  color: blue;
}

:nth-child(n)

选择作为其父元素第n个子元素的元素。

css

/* 选择第2个p元素 */
p:nth-child(2) {
  color: green;
}

/* 选择所有奇数位置的p元素 */
p:nth-child(odd) {
  background-color: #f5f5f5;
}

/* 选择所有偶数位置的p元素 */
p:nth-child(even) {
  background-color: #e0e0e0;
}

/* 选择从第3个开始的所有p元素 */
p:nth-child(n+3) {
  margin-top: 20px;
}

:nth-last-child(n)

选择作为其父元素倒数第n个子元素的元素。

css

/* 选择倒数第2个p元素 */
p:nth-last-child(2) {
  color: orange;
}

:first-of-type

选择作为其父元素第一个特定类型子元素的元素。

css

/* 选择第一个p元素 */
p:first-of-type {
  font-weight: bold;
}

:last-of-type

选择作为其父元素最后一个特定类型子元素的元素。

css

/* 选择最后一个p元素 */
p:last-of-type {
  font-style: italic;
}

:nth-of-type(n)

选择作为其父元素第n个特定类型子元素的元素。

css

/* 选择第2个p元素 */
p:nth-of-type(2) {
  color: red;
}

3. 表单伪类

表单伪类用于选择表单元素的特定状态。

:enabled

选择启用的表单元素。

css

input:enabled {
  background-color: white;
}

:disabled

选择禁用的表单元素。

css

input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

:checked

选择被选中的表单元素（如单选按钮、复选框）。

css

input:checked {
  box-shadow: 0 0 0 2px blue;
}

:required

选择具有required属性的表单元素。

css

input:required {
  border: 2px solid red;
}

:optional

选择不具有required属性的表单元素。

css

input:optional {
  border: 2px solid green;
}

:valid

选择内容有效的表单元素。

css

input:valid {
  border: 2px solid green;
}

:invalid

选择内容无效的表单元素。

css

input:invalid {
  border: 2px solid red;
}

4. 其他伪类

:not(selector)

选择不匹配指定选择器的元素（否定伪类）。

css

/* 选择所有不是p元素的元素 */
:not(p) {
  margin: 0;
}

/* 选择所有没有error类的div元素 */
div:not(.error) {
  background-color: white;
}

:empty

选择没有子元素（包括文本节点）的元素。

css

div:empty {
  height: 20px;
  background-color: #f5f5f5;
}

:root

选择文档的根元素（通常是html元素）。

css

:root {
  --main-color: blue;
}

body {
  color: var(--main-color);
}

特点

状态选择：可以选择元素的特定状态（如悬停、焦点、选中等）
位置选择：可以选择元素在文档结构中的特定位置
无额外标记：不需要在HTML中添加额外的类或ID即可选择元素
中优先级：在CSS选择器优先级中，伪类选择器的优先级与类选择器相同

注意事项

顺序重要：对于链接的伪类，建议按照:link、:visited、:hover、:active的顺序使用（LVHA顺序）
浏览器兼容性：不同的伪类在不同浏览器中的支持情况不同，尤其是一些较新的伪类
性能考虑：某些伪类（如:nth-child）可能会影响页面性能，尤其是在大型文档中

浏览器兼容性

伪类	Chrome	Firefox	Safari	Edge	IE
:hover, :active, :focus	1+	1+	1+	12+	6+
:link, :visited	1+	1+	1+	12+	6+
:first-child, :last-child	1+	1+	1+	12+	7+
:nth-child, :nth-last-child	1+	3.5+	3.1+	12+	9+
:first-of-type, :last-of-type	1+	3.5+	3.1+	12+	9+
:nth-of-type, :nth-last-of-type	1+	3.5+	3.1+	12+	9+
:enabled, :disabled	1+	1+	1+	12+	9+
:checked	1+	1+	3+	12+	9+
:required, :optional	10+	4+	5+	12+	10+
:valid, :invalid	10+	4+	5+	12+	10+
:not	1+	1+	3+	12+	9+
:empty	1+	1+	1+	12+	9+
:root	1+	1+	1+	12+	9+

学习建议

伪类选择器是CSS中非常强大的选择器之一，它可以实现许多动态效果和复杂的选择。建议初学者先掌握常用的伪类（如:hover、:focus、:first-child、:nth-child等），然后再学习更高级的伪类。在实际项目中，伪类选择器常用于创建交互效果、表单验证和复杂的文档结构选择。