CSS3基础——伪类选择符、伪元素的讲解和运用

最新推荐文章于 2025-09-25 08:37:58 发布

原创最新推荐文章于 2025-09-25 08:37:58 发布 · 524 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css3 #前端 #css

一、伪类选择符

1、定义

伪类选择符是能被 CSS 支持的浏览器自动识别的特殊选择符，可视为特殊的类选择符。其最大作用在于为链接的不同状态定义不同样式。伪类名称中的 “伪” ，源于它指定的并非文档中实际存在的对象，而是选择符或其相关对象的状态。不同于类选择符，伪类选择符不能随意命名。

伪类可以让用户在使用页面的过程中增加更多的交互效果，例如应用最为广泛的锚点标签 <a> 的几种状态（未访问链接状态、已访问链接状态、鼠标指针悬停在链接上的状态,以及被激活的链接状态），具体代码如下所示：

a:link {color:#FF0000;}    /*未访问的链接状态*/    
a:visited {color:#00FF00;}    /*已访问的链接状态*/    
a:hover {color:#FFO0FF;}    /*鼠标指针悬停到链接上的状态*/    
a:active {color:#0000FF;}    /*被激活的链接状态*/

为了简化代码，可以把伪类选择符中相同的声明提出来放在 a 标签选择符当中

注：定义多种伪类选择符时，‘active’ 样式需写在 ‘hover’ 样式之后，否则可能失效

2、伪类的理解

伪类可以理解为标签的四个内置动态属性：

:link 链接访问前的样式

:visited 链接访问后的样式

:hover 鼠标悬停在链接上的样式

:active 链接被激活时（鼠标左键按下但还未抬起）的样式

伪类只能在 CSS 配置，这四个伪类选择器通常一起使用，以创建具有丰富交互效果的链接和按钮

注：① :link，:visited，:hover，:active 这四个伪类从前到后的顺序不能颠倒，否则会影响浏览器的渲染

②有些浏览器对伪类的支持不太好，比如部分火狐浏览器无法支持 :active 属性（我们主要使用谷歌浏览器和 edge 浏览器）

3、伪类选择符的运用

以 “百度” 为例，运用伪类选择器单击链接达到效果。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>

        #a1:link{
            color: darkblue;
        }
        #a1:visited{
            color: crimson;
        }
        #a1:hover{
            color: aqua;
        }
        #a1:active{
            color: black;
        }
        


    </style>
</head>
<body>

    <a href="https://www.baidu.com/" id="a1">
        百度首页
    </a>

    <hr>

    <a href="https://www.baidu.com/" id="a2">
        百度一下
    </a>


</body>
</html>

运行结果：

正如图中所示，当鼠标放在 “百度首页” 上时，百度首页会变成设置的颜色。

二、伪元素

1、定义

与伪类的方式类似，伪元素通过对插入文档中的虚构元素进行触发，从而达到某种特定效果。CSS的主要目的是给 HTML 元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。CSS 有一个特性是允许用户添加额外元素而不扰乱文档本身，这就是 “伪元素”。

伪元素语法的形式为：

选择符：伪元素 { 属性：属性值；}

2、伪元素的作用

伪元素	作用
:first-letter	将特殊的样式添加到文本的首字母
:first-line	将特殊的样式添加到文本的首行
:before	在某元素之前插入某些内容
:after	在某元素之后插入某些内容

3、伪元素的运用

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>

    <!-- 伪元素？ —— 伪造的元素（假的元素，虚拟的元素） -->

    <style>

        ul li{
            /* 将无序列表前面默认的圆点标注去除 */
            list-style: none;
            width: 15%;
            height: 30px;
            background-color: green;
            border: 2px red solid;
        }
        ul::before{
            /* 下面这两句样式设置为固定语法，可以不做理解 */
            content: "";
            /* 让这个伪元素变成块元素 */
            display: block;
            list-style: none;
            width: 15%;
            height: 30px;
            background-color: blue;
            border: 2px rgb(180, 0, 0) solid;        
        }
        ul::after {
            content: "";
            display: block;

            width: 15%;
            height: 30px;
            background-color: rgb(76, 0, 255);
            border: 2px rgb(212, 42, 0) solid;        
        }

    </style>

</head>
<body>
    <ul>
        <!-- 这里有一个伪元素，叫做前置伪元素 -->
        <!-- <before></before> -->
        <li id="li1">
            <!-- <before></before> -->
            <!-- <after></after> -->
        </li>

        <li></li>
        <li></li>
        <!-- 这里有一个伪元素，叫做后置伪元素 -->
        <!-- <after></after> -->
    </ul>
</body>
</html>

运行结果：