伪类与伪元素的区别

详解伪类与伪元素推荐：

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

伪类与伪元素的区别

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

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

相同点

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

不同点

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

注意：

  1. 伪对象要配合content属性一起使用。
  2. 伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入。
  3. 伪对象的特效通常要使用:hover伪类样式来激活。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>

本文标题:伪类与伪元素的区别

文章作者:陈楚吟

发布时间:2020-02-26, 13:16:46

最后更新:2020-02-26, 13:18:35

原始链接:http://yoursite.com/2020/02/26/伪类与伪元素的区区别/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 伪类与伪元素的区别
  2. 2. 伪元素单冒号与双冒号区别
|