CSS伪类与伪元素详解教程

**CSS伪类与伪元素入门教程：提升网页表现力的关键** CSS中的伪类和伪元素是强大的选择器，用于样式化元素的特定状态或虚拟结构，无需修改HTML。本文深入解析伪类（如`:hover`, `:focus`, `:first-child`）和伪元素（如`::before`, `::after`, `::first-letter`）的区别、语法和应用。伪类用于匹配元素的状态，而伪元素则用于创建DOM中不存在的装饰性内容。掌握它们能让你更灵活地控制页面表现，实现丰富的视觉效果，提升用户体验。本文将通过实例讲解常用伪类和伪元素的用法，并提供实用技巧与注意事项，助你轻松掌握这些CSS高级特性，打造更具吸引力的网页。

伪类用于选择元素的特殊状态或位置，如:hover、:focus、:first-child等，以单冒号定义；伪元素用于创建不存在于DOM中的虚拟结构，如::before、::after、::first-letter，推荐用双冒号表示。两者语法和用途不同，伪类匹配状态，伪元素生成装饰性内容，掌握它们可提升CSS表现力。

CSS中的伪类和伪元素是用于选择和样式化特定状态或结构部分的特殊选择器。它们看起来像类或元素，但实际上并不在HTML中存在，而是由CSS动态生成或匹配某些条件。理解它们的区别和用法，对掌握CSS至关重要。

伪类（Pseudo-classes）

伪类用于定义元素的特殊状态或位置。它以冒号 : 开头，常见于用户交互、元素在文档中的位置等场景。

常用伪类示例：

• :hover —— 鼠标悬停时触发，常用于按钮或链接的交互效果。
• :focus —— 元素获得焦点时应用，如输入框被点击或Tab选中。
• :active —— 元素被激活时（如鼠标按下），常用于按钮按下状态。
• :visited —— 已访问过的链接，仅适用于 a 标签。
• :first-child —— 匹配父元素下的第一个子元素。
• :last-child —— 匹配父元素下的最后一个子元素。
• :nth-child(n) —— 按位置选择第n个子元素，支持公式如 2n+1（奇数项）。
• :not(selector) —— 排除符合指定选择器的元素。

例如，让列表中每一项鼠标悬停时背景变灰：

li:hover {
  background-color: #f0f0f0;
}

又如，选中第一个段落：

p:first-child {
  font-weight: bold;
}

伪元素（Pseudo-elements）

伪元素用于创建不在DOM中实际存在的虚拟元素，通常用来装饰或插入内容。它使用双冒号 ::（也可用单冒号兼容旧浏览器），表示其“非真实元素”特性。

常见伪元素说明：

• ::before —— 在元素内容前插入内容，常配合 content 属性使用。
• ::after —— 在元素内容后插入内容，同样依赖 content。
• ::first-line —— 选中块级元素的第一行文本。
• ::first-letter —— 选中块级元素首字符，适合首字放大效果。
• ::selection —— 定义用户选中文本时的高亮样式。

比如，为每个警告提示前加一个感叹号：

.warning::before {
  content: "⚠️ ";
  color: red;
}

实现首字下沉效果：

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 5px;
}

修改选中文本的背景色：

::selection {
  background-color: yellow;
  color: black;
}

伪类与伪元素的区别

核心区别在于用途和语法：

• 伪类描述的是状态或位置，如“悬停”、“第一个孩子”；
• 伪元素描述的是文档中不存在的结构部分，如“内容之前”、“首字母”；
• 语法上，伪元素推荐使用 ::，以区别于伪类的 :，尽管多数浏览器仍接受单冒号写法。

例如：a:hover 是伪类，表示链接的悬停状态；而 p::before 是伪元素，表示段落前插入的内容。

实用技巧与注意事项

• 使用 ::before 和 ::after 时，必须设置 content 属性，即使为空（如 content: "";）。
• 伪元素默认是 inline 元素，必要时可设为 display: block 或其他类型。
• 伪类可以链式使用，如 a:hover:focus 表示既悬停又聚焦的状态。
• 注意浏览器兼容性，尤其是 :nth-child 和 ::selection 在老版本IE中的支持情况。

基本上就这些。掌握伪类和伪元素，能让你更灵活地控制页面表现，无需额外HTML标签也能实现丰富视觉效果。

以上就是《CSS伪类与伪元素详解教程》的详细内容，更多关于的资料请关注golang学习网公众号！