伪元素VS伪类：CSS选择器的俩大工具

        在CSS的世界里，伪元素（pseudo-elements)和伪类(pseudo——classes）这俩个名词经常容易被混淆，它们都能让我们选择并样式化文档的特定部分，但所呈现的样式大不相同，接下来让我们深入探讨它们的区别和用法。

       (一）伪类(pseudo——classes）

伪类用于选择处于特定状态的元素。它们以单个冒号（：)开头（CSS3之前的语法，现代中CSS中伪类也使用单冒号）。

        /* 访问链接前的样式 */
        a:link{
            color: skyblue;
        }
         /* <!-- 链接悬停状态 --> */
         a:hover{
            color: red;
         }
         /* 已经访问过的链接 */
         a:visited{
            color: aquamarine;
         }
         /* 链接被激活时 （鼠标左键按下但还未抬起）*/
         a:active{
            color: blue;
         }

 

伪类本质上是在选择已存在的元素，只是这些元素处于某种特定状态或满足特定的条件。

需要注意的是：

1. ：link,        :visited,        :hover,        :active 这四个伪类从前到后的顺序不能颠倒，否则会影响浏览器的渲染。

2.有些浏览器对伪类的支持不太好，比如部分火狐浏览器无法支持 ：active属性（我们主要用谷歌浏览器和edg浏览器）。

（二），伪元素（pseudo-elements)

        伪元素则用于样式化元素的特定部分，甚至可以在文档中插入新的内容。它们以双冒号开头（：：）在CSS3引入新的语法，但单冒号仍被支持以保持向后兼容。

常见伪元素示例：

  /* 在元素内容前插入内容 */
      h1::before{
        content: "";
      }
      /* 在元素后插入内容 */
      h1::after{
        content: "";
      }

伪元素实际上是在创建文档中并不存在的虚拟元素，用于样式化或添加内容。

（三），二者在不同场景中的使用

        当你需要根据用户交互（如悬停，点击）或文档结构（比如第一个子元素）来改变样式时，使用伪类。

        当你需要样式化元素的一部分（如首字母）或添加装饰性内容时，使用伪元素。

总结：理解伪类和伪元素的区别将帮助你更有效的使用CSS，写出更加简洁，更加强大的样式表。记住这个简单的规则：伪类选择状态，伪元素创建内容。