CSS伪类与伪元素精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/systempause/article/details/104515347

详解伪类与伪元素推荐：

https://www.cnblogs.com/slly/p/10239055.html

伪类与伪元素的区别

伪类本质上是为了弥补常规css选择器的不足，以便获取更多的信息。
伪元素本质上是创建一个有内容的虚拟容器。
CSS3中伪类和伪元素语法不同。
1. 伪类 :link :hover
2. 伪元素 ::before ::after
可以同时使用多个伪类，却只能同时使用一个伪元素。
其中伪元素和伪类的根本区别在于：他们是否创造了新的元素，这个新的元素就叫做“伪元素”。
1. 伪元素/伪对象：不存在在DOM文档中，是虚拟元素，是创建新元素。这个新元素是某个元素的子元素，这个元素虽然逻辑上存在，但却不存在于文档树中。
2. 伪类：存在于DOM文档中，（无标签，只在触发条件时才能看到），逻辑上存在但在文档树上却无需标识的分类。
因为伪元素类似于添加类，故可添加多个，而伪元素在一个选择其中只能出现一次，并且只能出现在末尾。

伪元素单冒号与双冒号区别

相同点

都可以用来表示伪类对象，用来设置对象前的内容
:before和::before写法是等效的; :after和::after写法是等效的

不同点

:before/:after是css2的写法，::before/::after是css3的写法
所以css2的要比css3的兼容好 , :before/:after 的兼容性要比::before/::after好，
不过在H5开发中建议使用::before/::after比较好

注意：

伪对象要配合content属性一起使用。
伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入。
伪对象的特效通常要使用:hover伪类样式来激活。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            background: yellow;
        }
        span:hover::before{
            content: "我出现扩大了所受的煎熬";
        }
    </style>
</head>
<body>
   <span>222还是666</span>
</body>
</html>