CSS伪类

伪类是一种特殊的状态或特殊的选择器，它必须搭配选择器使用。这里介绍几个常用的伪类：

# hover

鼠标悬浮状态伪类，主要用于对内容强调或链接说明。

span:hover {
    color: red;
  }

1
2
3

# visited

点击态伪类，用于链接点击过后状态。默认未点击是蓝色，点击后是紫色。

a {
	color: blue;
}
a:visited {
    color: red;
  }

1
2
3
4
5
6

# focus

焦点伪类，主要用于输入框。

.input-focus {
    padding: 10px;
    outline-style: none;
    border: none;
    box-sizing: border-box;
    border: 1px solid #999999;
    border-radius: 5px;
  }
  .input-focus:focus {
    border-color: red;
  }

1
2
3
4
5
6
7
8
9
10
11

# child

结构化伪类，用于对特定元素状态选取

ul {
	<!-- 选择第一个li元素 -->
	li:first-child {
		background-color: yellow;
	}
	
	<!-- 选择最后一个li元素 -->
	li:last-child {
		background-color: yellow;
	}
	
	<!-- nth-child可以对列表指定规格元素设置状态 可选：an+b|odd|even  -->
	li:nth-child(odd) {
		background-color: yellow;
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# checked

用于对用户选择状态的伪类，通常用于radio、checkbox等。

详细代码请查看示例

更多伪类可查看标准伪类索引

#CSS

上次更新: 2025/09/05, 8:09:00

← CSS排版上下文 CSS伪元素→