CSS伪类与伪元素

原创于 2025-05-05 17:12:44 发布 · 330 阅读

4 ·

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

GEO检测

伪类

1.介绍

伪类通常用于对链接的不同状态以添加样式效果，他可以帮助我们根据链接的状态（访问前，访问后，鼠标悬停在链接上，链接被点击时但鼠标未松开）定义不同的样式。

伪类有四种选择器：：link（链接访问前的样式），：vistited（链接访问后的样式），：hover（鼠标悬停在链接上的样式），：active（链接被激活时（鼠标左键按下但还未抬起）的样式）。这四个伪类选择器通常一起使用，以创建具有丰富交互效果的链接和按钮。

由于浏览器会将存储访问记录所以通常显示的都是访问后的状态访问前的样式需要删除访问记录后正常显示

2.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类</title>
    <style>
        a:link {color:red;} /* 未访问的链接 */
        a:visited {color:green;} /* 已访问的链接 */
        a:hover {color:pink;} /* 鼠标划过链接 */
        a:active {color:blue;} /* 已选中的链接 */
    </style>
    
</head>
<body>
    <a href="https:www.baidu.com">百度首页</a>
</body>
</html>

访问前：

访问后

鼠标悬停在链接上

链接被激活时（鼠标左键按下但还未抬起）

3.注意事项

1.这四个选择器需要按照：link，：vistited，：hover，：active从前到后的顺序不能颠倒，否则可能会影响浏览器渲染。

2.有些浏览器对伪类的支持不太好，比如火狐无法支持：active 属性。

伪元素

1.介绍

伪元素是一种特殊的选择器，它可以在不改变 HTML 结构的情况下对页面元素的特定部分进行样式设置。一个选择器中只能使用一个伪元素，且必须紧跟在简单选择器之后。标准的做法是使用：：来区分伪类和伪元素。

::after：在元素内容之后插入内容。

::before：在元素内容之前插入内容。

2.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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: pink;
            border: 2px red solid;
        }
        #li1::before{
            content:"";
            display: block;
            list-style: none;
            width: 50%;
            height: 30px;
            background-color: red;
            border: 2px pink double;
        }
        ul::after{
            content:"";
            display: block;
            list-style: none;
            width: 15%;
            height: 30px;
            background-color: green;
            border: 2px blue solid;
        }
    </style>
</head>
<body>
    <ul>
        <!-- 这里有一个伪元素,叫做前置伪元素 -->
         <!-- <before></before> -->
        <li id="li1">
             <!-- <before></before> -->
             <!-- <after></after> -->

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