CSS 伪元素和伪类的作用和区别？

伪类 (Pseudo-class)

作用： 伪类用于选择元素的特定状态或条件。例如，当用户与元素交互时，或者元素在文档中的特定位置时。伪类通常不会单独存在，而是作为现有选择器的补充，选择特定状态下的元素。

常见的伪类：

• :hover：当用户悬停在元素上时应用样式。
• :focus：当元素获得焦点时应用样式，通常用于输入框。
• :nth-child(n)：选择其父元素的第 n 个子元素。
• :first-child：选择其父元素的第一个子元素。
• :last-child：选择其父元素的最后一个子元素。
• :active：当元素被用户激活（通常是点击）时应用样式。

示例：

button:hover {
  background-color: blue;
}

input:focus {
  border-color: green;
}

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

伪元素 (Pseudo-element)

作用： 伪元素用于创建或选择文档中元素的一部分。这些部分通常是无法直接在 DOM 中操作的，例如元素的第一个字母、第一个行、或是在元素内容之前或之后插入的内容。

常见的伪元素：

• ::before：在元素的内容之前插入内容。
• ::after：在元素的内容之后插入内容。
• ::first-line：选择元素的第一行。
• ::first-letter：选择元素的第一个字母。
• ::selection：选择用户在页面上选中的文本部分。

示例：

p::first-line {
  font-size: 1.2em;
}

p::first-letter {
  font-size: 2em;
  color: red;
}

div::before {
  content: "Note: ";
  font-weight: bold;
}

div::after {
  content: " - The end.";
}

区别

1. 选择范围不同：

   • 伪类选择已有元素的特定状态或条件。
   • 伪元素创建或选择元素的特定部分，通常是元素内部的内容。

2. 语法区别：

   • 伪类使用单冒号（:），如 :hover。
   • 伪元素使用双冒号（::），如 ::before 和 ::after。虽然在 CSS2 规范中，伪元素也使用单冒号，但在 CSS3 中推荐使用双冒号以区分伪类。

3. 使用场景：

   • 伪类常用于响应用户交互、选择特定位置的元素或指定特定条件下的样式。
   • 伪元素则用于操作元素内容的一部分，如插入内容、样式化第一行或第一个字母等。

总结

CSS 伪类和伪元素是强大的工具，帮助开发者实现复杂的样式和交互效果。理解它们的作用和区别是掌握高级 CSS 技巧的重要一步。