什么是伪类选择器（Pseudo-Class Selectors）?

在 CSS 中，伪类选择器（Pseudo-Class Selectors） 是一种特殊的选择器，它允许你选择处于特定状态的 HTML 元素，而这些状态通常不能通过简单的元素、类或 ID 选择器来表示。

简单来说，伪类选择器就是给元素增加一种“虚拟的类别”，这种类别是基于元素在文档树中的位置、元素的状态（比如鼠标悬停、被点击、未访问过等），或者元素的内容来定义的。它们不是真正的 HTML 属性或类名。

为什么需要伪类选择器？

想象一下，你想要：

这些“状态”或“位置”无法通过常规的 HTML 标记来实现，这时伪类选择器就派上用场了。

伪类选择器的语法以一个冒号 (:) 开头，后面跟着伪类的名称：

CSS 

selector:pseudo-class {
    property: value;
}

伪类选择器有很多种，根据它们的作用可以分为几大类：

这些是最常见的伪类，用于根据用户的交互状态来改变元素的样式。

:link: 选择未访问过的链接。
CSS
```
a:link {
    color: blue;
}
```
:visited: 选择已访问过的链接。出于隐私考虑，能设置的样式属性非常有限（主要是颜色）。
CSS
```
a:visited {
    color: purple;
}
```

:hover: 选择当鼠标指针悬停在元素上时。

CSS 

a:hover {
    color: red; /* 鼠标悬停时变为红色 */
}

:active: 选择当元素被激活时（例如，鼠标点击下去但尚未松开）。
CSS
```
a:active {
    color: green; /* 点击时变为绿色 */
}
```
:focus: 选择当元素获得焦点时（例如，通过点击、触摸或 Tab 键导航到输入框）。
CSS
```
input:focus {
    border: 2px solid blue; /* 聚焦时边框变蓝 */
}
```

这些伪类根据元素在文档结构中的位置来选择元素。

:first-child: 选择父元素的第一个子元素。

CSS 

li:first-child {
    font-weight: bold; /* 列表的第一个子项加粗 */
}

:last-child: 选择父元素的最后一个子元素。

CSS 

li:last-child {
    border-bottom: none; /* 列表的最后一个子项没有下边框 */
}

:nth-child(n): 选择父元素的第 n 个子元素。n 可以是数字、关键字（even 偶数，odd 奇数）或公式（如 2n、2n+1）。

CSS 

li:nth-child(odd) { /* 选择奇数行的列表项 */
    background-color: #f2f2f2;
}
li:nth-child(2n) { /* 选择偶数行的列表项 */
    background-color: #e0e0e0;
}

:checked: 选择被用户选中（checked）的单选框或复选框。

CSS 

input[type="checkbox"]:checked + label {
    font-weight: bold; /* 选中复选框时，旁边的label加粗 */
}

:not(selector): 选择不匹配指定选择器的元素。这是一个否定伪类。

CSS 

p:not(.intro) { /* 选择所有不是intro类的段落 */
    margin-top: 1em;
}

posted on 2025-07-25 16:07 不亮阅读(26) 评论(0) 收藏举报

刷新页面返回顶部