前端面试题：伪类选择器和伪元素选择器的区别？

伪类选择器和伪元素选择器是CSS中用来选择元素的特殊方式，它们允许开发者在不添加额外HTML标记的情况下，借助CSS选择器实现样式化文档中的特定部分。

1. 伪类选择器（Pseudo-classes）

伪类选择器用于向某些选择器添加特殊的状态。

• 基本语法：伪类选择器以冒号（:）开头，紧跟在选择器后面。

• 一些常见的伪类选择器包括：

• :hover：当用户鼠标悬停在元素上时应用的样式。
• :focus：当元素获得焦点时应用的样式，比如通过键盘导航或点击。
• :active：当元素被激活时应用的样式，例如鼠标点击时。
• :checked：用于表单元素（如复选框或单选框），表示已选中状态。
• :nth-child(n)：选择某个父元素的第n个子元素，可以使用表达式来选中多个元素。

示例：

综上所述，伪类选择器和伪元素选择器为CSS提供了强大的选择和样式化能力，使开发者能够更灵活地控制和设计页面的外观和交互效果。

• /* 当链接被悬停时改变颜色 */
  a:hover {
    color: red;
  }
   
  /* 选中表单中被选中的复选框 */
  input[type="checkbox"]:checked {
    background-color: lightblue;
  }
  

  2. 伪元素选择器（Pseudo-elements）

• 伪元素选择器用于向某些选择器添加特殊的部分，而不是元素的特定状态。
• 基本语法：伪元素选择器以双冒号（::）开头，紧跟在选择器后面

• 一些常见的伪元素选择器包括：

• ::before：在元素内容前插入生成的内容。
• ::after：在元素内容后插入生成的内容。
• ::first-line：选中元素的第一行文本。
• ::first-letter：选中元素的第一个字母。
• 示例：

• /* 在每个段落前插入引号 */
  p::before {
    content: '"';
  }
   
  /* 选中每个段落的第一个字母 */
  p::first-letter {
    font-size: 150%;
  }
  

  区别与应用场景

• 伪类选择器通常用于根据元素的状态或用户行为（如悬停、点击）来选择元素，适合于动态效果和交互。

• 伪元素选择器用于向元素的特定部分（如内容前后、首字母）添加样式或内容，适合于添加装饰性元素或特殊文本效果。