补充一下为元素和伪类的区别,参考的是我csdn的文章https://blog.csdn.net/qq_37820580/article/details/107289944#21
每条选择器最多只能包含一个伪元素
每条选择器可以包含多个伪类
伪元素的操作对象是新生成的dom元素,而不是原来dom结构里就存在的;而伪类恰好相反,伪类的操作对象是原来的dom结构里就存在的元素。
伪元素与伪类的根本区别在于:操作的对象元素是否存在于原来的dom结构里。
## 伪元素和伪类的区别 ``` 1. 伪类本质上是给元素创建多一个类名,多个类名多个效果 2. 伪元素本质上是创建了一个有内容的虚拟容器,也就是多了一个dom节点(元素) 3. CSS3中伪类和伪元素的语法不同,伪元素一般是:: , 伪类是: 4. 可以同时使用多个伪类,而只能同时使用一个伪元素; <a href="">sdasasd</a> <a href="">第二个a不会有效果</a> /* 同时使用两个伪类,那就中间不要有空格! */ a:first-child:hover{ color: red; } /* 只能同时使用一个伪元素,不能同时使用多个伪元素! */ a:after{ content: ''; position: absolute; top: 0; height: 10px; width: 10px; border-radius: 50%; background: red; } ```
其中伪类和伪元素的根本区别在于:它们是否创造了新的元素,, 这个新创造的元素就叫 "伪无素" 。
伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。 这个新元素(伪元素) 是某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中.
伪类:存在DOM文档中,(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。
6. 因为伪类是类似于添加类所以可以是多个,而伪元素在一个选择器中只能出现一次,并且只能出现在末尾
7. W3C中对于二者应用的描述(描述太模糊, 不容易理解):
相同点
不同点
注意:
其中伪类和伪元素的根本区别在于:它们是否创造了新的元素,, 这个新创造的元素就叫 "伪无素" 。
伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。 这个新元素(伪元素) 是某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中.
伪类:存在DOM文档中,(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。
6. 因为伪类是类似于添加类所以可以是多个,而伪元素在一个选择器中只能出现一次,并且只能出现在末尾
7. W3C中对于二者应用的描述(描述太模糊, 不容易理解):