注意：伪类和伪元素的区别与说明

潮汐未见潮落

已于 2022-04-26 09:10:05 修改

阅读量420

点赞数

分类专栏： HTML与CSS 文章标签： css html5

于 2022-04-26 09:07:16 首次发布

本文链接：https://blog.csdn.net/qq_52855464/article/details/124419178

版权

HTML与CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

前言：

伪选择器弥补了常规选择器的不足，能够实现一些特殊情况下的样式。css引入伪类和伪元素概念是为了格式化文档树以外的信息。下面用几个例子对伪类和伪元素进行简单说明。

一.常规css选择器

常规css选择器的实现较为简单，通常情况下像标签添加唯一标识的“class”或者“id”属性，达到选择目标的效果

<!-- 
    描述
将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，
"绿色"设置为"rgb(0, 128, 0)"，"黑色"设置为"rgb(0, 0, 0)"，且字体大小都为20px。
 -->

 <html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div{
                color: rgb(255,0,0);
                font-size: 20px;
            }
            .green{
                color: rgb(0,128,0);
                font-size: 20px; 
            }
            #black{
                color: rgb(0,0,0);
                font-size: 20px;   
            }
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

效果如下：

可以看到常规css选择器的实现简单，下面来说说今天的正题

二、伪元素选择器

伪元素选择器（pseudo-element selector）用于处理文档内容，可指定某处的内容（即过滤内容）或添加内容。早期的时候，伪元素和伪类都使用单冒号（:）。但最新的CSS3规定伪元素得使用双冒号（::），伪类用单冒号，这样两者的区分能更明显。注意，伪元素只能出现在选择器的最后位置，并且不能同时定义多个伪元素。

它的作用是用于创建一些不在DOM树中的元素，并为其添加样式。

<!-- 
    描述    给html模块的div元素加一个后伪元素
且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。
 -->
 <html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div::after{
                content: '';
                width: 20px;
                height: 20px;
                background-color: rgb(255, 0, 0);
                display: block;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

效果如右图所示：

伪元素作用于元素的一部分：一个段落的第一行或者第一个字母。

伪元素其实相当于伪造了一个元素，例如before,first-letter达到的效果就是伪造了一个元素，然后添加了其相应的效果而已。

三、伪类

伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素，如：a:hover

伪类作用对象是整个元素，用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的

<!-- 
    描述  将html模块中ul列表的
       第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。
 -->

 <html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            li:nth-child(even){
          background-color: rgb(255,0,0)
            }
            /* 
                还可以使用这种方式
               li:nth-child(2),li:nth-child(4){
                background-color:rgb(255,0,0)
            }
             */
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

效果如右图：

伪类选择器（pseudo-class selector），它用于描述元素的动态特征，再根据元素的特殊状态来选择元素，常用的有结构、链接和表单等伪类。注意，伪类只对它依附的元素起作用，并且多个伪类可拼接在一起。

总结、

伪类与伪元素的特性及其区别：

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
CSS3中伪类和伪元素的语法不同；伪类 :link :hover 伪元素 ::before ::after
可以同时使用多个伪类，而只能同时使用一个伪元素；
其中伪类和伪元素的根本区别在于：它们是否创造了新的元素, 这个新创造的元素就叫 "伪无素" 。

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中.

　　伪类：存在DOM文档中，(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。

　　6. 因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

　　7. W3C中对于二者应用的描述(描述太模糊, 不容易理解)：