伪类和伪元素

一、伪类（Pseudo-classes）

作用：选择处于特定状态的元素（例如：鼠标悬停、被点击、第一个子元素等）。

常见伪类及代码示例：

:hover - 鼠标悬停时

css 复制代码

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

:nth-child(n) - 选择第n个子元素

css 复制代码

li:nth-child(2) {
  background: yellow; /* 第二个列表项变黄 */
}

:focus - 输入框获得焦点时

css 复制代码

input:focus {
  border: 2px solid blue; /* 输入框聚焦时边框变蓝 */
}

:first-child - 第一个子元素

css 复制代码

p:first-child {
  font-weight: bold; /* 第一个段落加粗 */
}

二、伪元素（Pseudo-elements）

作用：选择元素的特定部分（例如：元素的内容前后、首行、首字母等）。

常见伪元素及代码示例：

::before - 在元素内容前插入内容

css 复制代码

div::before {
  content: "★"; /* 在div前添加一个星星 */
  color: gold;
}

::after - 在元素内容后插入内容

css 复制代码

a::after {
  content: " ↗"; /* 链接后添加箭头 */
  color: gray;
}

::first-line - 元素的第一行文本

css 复制代码

p::first-line {
  text-transform: uppercase; /* 段落首字母大写 */
}

::selection - 用户选中的文本

css 复制代码

::selection {
  background: pink; /* 选中文本背景变粉色 */
}

三、核心区别总结

特性	伪类（Pseudo-classes）	伪元素（Pseudo-elements）
作用对象	元素的特定状态	元素的特定部分
语法符号	单冒号 `:`（例如 `:hover`）	双冒号 `::`（例如 `::before`）
常见用途	动态状态（如悬停、焦点）	内容插入或样式修饰（如首行）
是否创建新元素	否	是（例如 `::before` 插入虚拟内容）

四、综合示例

html 复制代码

<!DOCTYPE html>
<html>
<head>
<style>
/* 伪类示例 */
button:hover {
  background: lightgreen; /* 悬停按钮变绿 */
}

li:nth-child(odd) {
  color: purple; /* 奇数列表项紫色 */
}

/* 伪元素示例 */
p::first-letter {
  font-size: 2em; /* 段落首字母放大 */
}

.block::before {
  content: "【前缀】"; /* 在块前插入内容 */
  color: red;
}
</style>
</head>
<body>
  <button>悬停我</button>
  <ul>
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
  </ul>
  <p>这是一个段落。</p>
  <div class="block">这是一个块级元素</div>
</body>
</html>

五、记忆技巧

伪类：联想"条件"，如"当...时"（例如：当鼠标悬停时）。
伪元素：联想"虚拟元素"，如插入内容或选择部分内容。
语法：CSS3规范推荐伪元素用双冒号 ::，但单冒号 : 也兼容。

回答：伪类是：可以设置指定元素特定状态下的样式，常见的伪类有给a标签加上hover鼠标在悬停时触发相应的行为比如链接会变红，给input输入框加上focus输入框在获取焦点时，触发相应的行为比如说输入框高亮。也可以列表元素li加上nth-child(n)给第n个元素加上指定的样式，比如说第二行加粗。还可以使用first-child伪类，选择第一个子元素，给其加上特定的属性。

伪元素是：：可以设置指定元素特定部分的内容和样式，常见的伪元素有：：before在元素前插入内容：：after在元素后插入内容：：first-line选择元素的第一行文本：：selection用户选中的文本。