type
status
date
slug
summary
tags
category
icon
password

📝 介绍

伪元素（Pseudo-elements）和伪类（Pseudo-classes）是 CSS 中的两个重要概念，用于向文档中的元素添加特定的样式或效果，而无需修改 HTML 结构。它们允许开发者选择文档中某些特定的状态或位置，并对其应用样式。

1. 伪元素（Pseudo-elements）：

伪元素允许开发者在元素的内容之前或之后插入虚拟的元素，并为其应用样式。伪元素以双冒号::开头，常见的伪元素包括::before和::after。

2. 伪类（Pseudo-classes）：

伪类允许开发者选择元素的特定状态或位置，并为其应用样式。伪类以冒号:开头，常见的伪类包括:hover（悬停状态）、:active（活动状态）、:focus（聚焦状态）、:first-child（第一个子元素）等。

🤗 总结归纳

区别：

  • 伪元素是在元素的内容之前或之后插入的虚拟元素，可用于创建一些额外的装饰或图标等。
  • 伪类是根据元素的特定状态或位置选择元素，并为其应用样式，常用于响应用户的操作或页面结构的特定位置。
总的来说，伪元素和伪类都是在不修改 HTML 结构的情况下为元素添加样式的强大工具，能够实现丰富的效果和交互体验。深入理解和熟练运用伪元素和伪类可以提高 CSS 的灵活性和可维护性。

📎 参考文章

伪类和伪元素 - 学习 Web 开发 | MDN
下一组我们将了解的选择器被称为伪类和伪元素。这一类选择器的数量众多，通常用于很明确的目的。一旦你了解了如何使用它们，你便可以通过查阅列表来寻找合适的那一项以完成你想要的选择。与之前一样，每个选择器相关的 MDN 页面都将帮助你了解各浏览器的支持情况。
伪类和伪元素 - 学习 Web 开发 | MDN
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
伪类和伪元素 - 学习 Web 开发 | MDN
Relate Posts
CSS 选择器
CSS 盒模型
CSS BFC
CSS 弹性布局
CSS 媒体查询
CSS 预处理和后处理器
CSS 媒体查询CSS 预处理和后处理器
  • Giscus
  • Utterance