如何区分 CSS 中的伪类和伪元素？

伪类（Pseudo-classes）和伪元素（Pseudo-elements）是 CSS 中用于精确选择元素的机制，核心区别在于它们操作的对象和目的。主要差异如下：

1. 目标对象和功能不同
   • 伪类（单冒号 :）：操作文档树中 已存在的元素状态。它描述元素的动态状态（如交互事件）或位置关系（不创建新元素）。本质是“为已有元素添加类别”。
     示例：
     • :hover 选鼠标悬停状态

       a:hover {
         color: red; /* 鼠标悬停时链接变红 */
       }
       

     • :nth-child(odd) 选奇数位置的子元素
   • 伪元素（双冒号 ::）：创建并操作 文档树外的新虚拟子元素，用作元素的特定部分。本质是“向文档添加逻辑上存在但不实际在 DOM 中的元素”。
     示例：
     • ::before 在元素前插入内容

       .button::before {
         content: "→"; /* 在按钮前添加箭头图标 */
         margin-right: 5px;
       }
       

     • ::first-letter 选段落首字母
2. 语法差异
   • CSS3 推荐：伪类用单冒号（:），伪元素用双冒号（::），但浏览器通常兼容单冒号。
3. 行为限制
   • 伪元素需要 content 属性才能生效（创建内容），而伪类仅基于状态选择。
   • 同一元素可应用多个伪类，但每个伪元素仅能出现一次。
   • 权重不同：伪类权重等同于类选择器 (0,0,1,0)，伪元素权重等同于元素选择器 (0,0,0,1)。
4. 实际使用场景
   • 伪类常用于 交互反馈（如链接状态变化、表单验证）：

     input:valid { border-color: green; } /* 输入有效时边框变绿 */
     

   • 伪元素用于 装饰性生成内容（如添加图标、格式化文本首行）：

     p::first-line { font-weight: bold; } /* 段落首行加粗 */