详解伪类与伪元素推荐:
https://www.cnblogs.com/slly/p/10239055.html
伪类与伪元素的区别
- 伪类本质上是为了弥补常规css选择器的不足,以便获取更多的信息。
- 伪元素本质上是创建一个有内容的虚拟容器。
- CSS3中伪类和伪元素语法不同。
- 伪类 :link :hover
- 伪元素 ::before ::after
- 可以同时使用多个伪类,却只能同时使用一个伪元素。
- 其中伪元素和伪类的根本区别在于:他们是否创造了新的元素,这个新的元素就叫做“伪元素”。
- 伪元素/伪对象:不存在在DOM文档中,是虚拟元素,是创建新元素。这个新元素是某个元素的子元素,这个元素虽然逻辑上存在,但却不存在于文档树中。
- 伪类:存在于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>