CSS 伪类选择器

伪类选择器（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;
}

使用技巧

1. 组合使用：伪类可以与其他选择器组合使用

   form input:focus:invalid {
     border-color: red;
   }

2. 性能考虑：结构伪类（如nth-child）可能影响页面渲染性能，尤其在大型DOM中

3. 浏览器兼容性：较新的伪类（如:focus-within）需要检查浏览器支持情况

4. 优先级：伪类与类选择器具有相同的特异性权重（0,1,0）

注意事项

• 某些伪类（如:visited）由于安全原因，样式受到浏览器限制

• 结构伪类是基于元素在父元素中的位置，而不是在整个文档中的位置

• 伪类顺序很重要，特别是对于链接状态（LoVe-HAte顺序：:link, :visited, :hover, :active）