聊一聊伪类和伪元素

CSS 伪类和伪元素是两种不同的概念，它们都用于扩展选择器的功能，但用途和工作方式有所不同。

伪类（Pseudo-classes）

伪类用于定义元素的特定状态。它们可以根据用户的行为（比如鼠标悬停）、元素的状态（比如是否被选中）或是文档树的位置（比如第一个子元素）来应用样式。伪类不创建新的元素，它们仅仅是表示元素在特定条件下的一个状态。

为什么引入伪类？

伪类被引入是为了允许开发者根据元素的状态或某些条件来应用特定的样式，而无需为此添加额外的类或 ID。这样可以保持 HTML 的简洁性并提高样式表的可维护性。

例子：

• :hover：当用户鼠标悬停在元素上时应用样式。

• :first-child：选中其父元素的第一个子元素。

• :checked：选中表单元素被选中的状态。

伪元素（Pseudo-elements）

伪元素用于样式化元素的特定部分或生成装饰性内容。它们被视为元素的一部分，可以用来创建一些不在文档树中的元素，如元素的第一个字母或插入到元素前后的内容。

为什么引入伪元素？

伪元素的引入是为了允许开发者操作和样式化元素的特定部分，而无需添加额外的标签。这样可以简化 HTML 结构并提供更精细的样式控制。

例子：

• ::before 和 ::after：在元素内部的开始和结束位置生成内容，通常与 content 属性一起使用。

• ::first-line：选中元素的第一行文本。

• ::first-letter：选中元素的第一个字母。

伪类与伪元素的区别

• 语法上的区别：

  • 在 CSS2 中，伪元素使用单冒号（例如 :before），但在 CSS3 中，为了区分伪类和伪元素，伪元素的语法改为使用双冒号（例如 ::before）。

  • 伪类仍然使用单冒号（例如 :hover）。

• 功能上的区别：伪类用于描述元素的特定状态，而伪元素用于样式化元素的某个部分或添加装饰性内容。

• 实现上的区别：伪元素可以看作是文档树中不存在的元素，它们可以生成新的盒模型（box）用于布局和样式化；伪类则是基于文档树中已有元素的状态或属性应用样式。

总的来说，伪类和伪元素都是为了在不改变 HTML 结构的前提下，通过 CSS 提供更强大和灵活的样式控制能力。

额外说明

在 CSS 2 中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在 CSS 2.1 中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。

因为过去的浏览器都实现过 CSS 2 的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。但是 CSS3 新增的伪类必须使用 ::，例如 ::section