当前位置：首页 > news >正文

CSS 伪类选择器

news 2025/9/12 7:32:08

伪类选择器（pseudo-class selector）是一种用于选择HTML元素特定状态或特征的关键字，它允许开发者基于文档树之外的信息（如用户交互、元素位置或状态变化）来选择元素并应用样式。

伪类选择器以冒号(:)开头，附加在基本选择器后面，用于定义元素的特殊状态。

伪类选择器分类及用法

1. 状态伪类（链接和用户操作）

/* 未访问的链接 */
a:link {color: blue;
}/* 已访问的链接 */
a:visited {color: purple;
}/* 鼠标悬停状态 */
a:hover {color: red;text-decoration: underline;
}/* 激活状态（鼠标按下未释放） */
a:active {color: green;
}/* 获取焦点的元素 */
input:focus {outline: 2px solid orange;
}

2. 结构伪类（基于文档结构）

/* 选择第一个子元素 */
li:first-child {font-weight: bold;
}/* 选择最后一个子元素 */
li:last-child {border-bottom: none;
}/* 选择第n个子元素 */
li:nth-child(2) {color: red;
}/* 选择奇数元素 */
tr:nth-child(odd) {background-color: #f2f2f2;
}/* 选择偶数元素 */
tr:nth-child(even) {background-color: #e6e6e6;
}/* 选择特定公式的元素 */
li:nth-child(3n+1) {margin-left: 0;
}/* 选择倒数第n个子元素 */
li:nth-last-child(2) {font-style: italic;
}/* 选择唯一子元素 */
div:only-child {padding: 10px;
}/* 选择第一个同类元素 */
p:first-of-type {font-size: 1.2em;
}/* 选择最后一个同类元素 */
p:last-of-type {margin-bottom: 0;
}/* 选择第n个同类元素 */
p:nth-of-type(2n) {background: #f8f8f8;
}/* 选择唯一同类元素 */
img:only-of-type {border: 3px solid black;
}

3. 表单相关伪类

/* 启用状态的元素 */
input:enabled {border: 1px solid #ccc;
}/* 禁用状态的元素 */
input:disabled {background-color: #f0f0f0;color: #999;
}/* 被选中的复选框或单选按钮 */
input:checked {outline: 2px solid blue;
}/* 必填字段 */
input:required {border-left: 3px solid red;
}/* 可选字段 */
input:optional {border-left: 3px solid #ccc;
}/* 有效输入 */
input:valid {border-color: green;
}/* 无效输入 */
input:invalid {border-color: red;
}/* 在范围之内 */
input:in-range {color: green;
}/* 超出范围 */
input:out-of-range {color: red;
}/* 只读元素 */
input:read-only {background-color: #f5f5f5;
}/* 可读可写元素 */
input:read-write {background-color: white;
}

4. 其他伪类

/* 否定选择器 */
div:not(.special) {opacity: 0.8;
}/* 根元素 */
:root {--main-color: #4d9fff;
}/* 空元素 */
div:empty {display: none;
}/* 目标元素（当前活动的锚点目标） */
:target {background-color: yellow;
}/* 选择包含指定文本的元素 */
p:contains("重要") {font-weight: bold;
}/* 语言选择器 */
html:lang(zh) {font-family: "Microsoft YaHei", sans-serif;
}

5. CSS3新增的伪类（部分）

/* 选择未选中的单选按钮或复选框 */
input:indeterminate {opacity: 0.5;
}/* 选择默认选项 */
option:default {font-weight: bold;
}/* 全屏模式下的元素 */
video:fullscreen {width: 100%;height: auto;
}/* 匹配正在播放的媒体元素 */
video:playing {border: 2px solid green;
}/* 匹配暂停状态的媒体元素 */
video:paused {border: 2px solid #ccc;
}