伪类选择器与伪元素选择器-CSDN博客

本文链接：https://blog.csdn.net/2401_89406454/article/details/148058180

伪类选择器和伪元素选择器是 CSS 中用于选择元素特定状态或特定部分的两种不同机制。

一、伪类选择器

二、伪元素选择器

一、伪类选择器

可以把伪类理解为标签的四个内置动态属性,且只能在CSS配置。

常见的伪类有：

:link 链接访问前的样式

:visited 链接访问后的样式

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

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

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

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

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

样例效果图：

源代码：

<style>
        a:link{
            color:blue;
        }
        a:visited{
            color: chartreuse;
        
        }
        a:hover{
            color: brown; 
            background-color: black;
        }
        a:active{
            color:cornflowerblue;
        }

</style>

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

    <hr>

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

二、伪元素选择器

伪元素是创建出的 “虚拟” 元素，用于为文档的特定部分添加样式。伪元素使用双冒号 :: 来表示。

常见的伪元素有：

::before：在所选元素的内容之前插入一个虚拟元素。通常需要配合 content 属性来定义插入的内容。

::after：在所选元素的内容之后插入一个虚拟元素，同样需要配合 content 属性。

::first-letter：选择元素文本的第一个字母。

::first-line：选择元素文本的第一行。

样例效果图：

源代码：

    <style>

        ul li{
            /* 将无序列表前面默认的圆点标注去除 */
            list-style: none;
            width: 15%;
            height: 30px;
            background-color: green;
            border: 2px red solid;
        }

        ul::before{
            /* 下面两条样式设置为固定语法 */
            content: "";
            /* 让这个伪元素变成块元素 */
            display: block;


            width:15% ;
            height: 30px;
            background-color: aqua;
            border:2px blue solid ;
        }

        ul::after{
             /* 下面两条样式设置为固定语法 */
             content: "";
            /* 让这个伪元素变成块元素 */
            display: block;


            width:15% ;
            height: 30px;
            background-color: aqua;
            border:2px red solid ;
        }

        #li1::after{
             /* 下面两条样式设置为固定语法 */
             content: "";
            /* 让这个伪元素变成块元素 */
            display: block;

            width:15% ;
            height: 30px;
            background-color: yellow;
            border:2px blueviolet solid ;

        }

    </style>

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

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