揭开 CSS 中的伪类和伪元素的神秘面纱：异曲同工还是截然不同？

在 CSS 中，伪类和伪元素都是用来选择和改变元素样式的，但它们的工作方式却截然不同。

• 伪类 ：

  • 用来为元素添加样式，但这些样式只能应用于特定的状态或条件下。
  • 常见的伪类包括：
    • :hover - 当鼠标悬停在元素上时
    • :active - 当元素被点击时
    • :focus - 当元素获得焦点时
    • :visited - 当元素被访问过时
    • :nth-child() - 选择元素的第 N 个子元素

• 伪元素 ：

  • 用来创建通常不存在于文档中的元素。
  • 常见的伪元素包括：
    • ::before - 在元素之前插入内容
    • ::after - 在元素之后插入内容
    • ::first-letter - 选择元素的第一个字母
    • ::first-line - 选择元素的第一行
    • ::selection - 选择元素中被选中的文本

伪类和伪元素的另一个主要区别在于它们的选择方式。伪类使用冒号 (:) 来表示，而伪元素使用两个冒号 (::) 来表示。此外，伪类可以应用于任何元素，而伪元素只能应用于某些特定元素。

总体而言，伪类和伪元素都是 CSS 中非常有用的工具，可以用来创建更复杂和动态的样式。了解它们之间的区别，将有助于你更有效地使用它们。

实例：

1. 使用 :hover 伪类为按钮添加悬停效果：

button:hover {
    background-color: red;
    color: white;
}

2. 使用 ::before 伪元素在标题前添加一个图标：

h1::before {
    content: "🎓";
    margin-right: 5px;
}

3. 使用 :nth-child() 伪类为列表中的奇数项添加不同的样式：

ul li:nth-child(odd) {
    background-color: lightgray;
}

4. 使用 ::selection 伪元素更改选中文本的颜色：

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

以上是伪类和伪元素的一些基本用法，它们可以帮助你创建更丰富和美观的网页。