学习CSS之伪元素选择器and伪类选择器-CSDN博客

本文链接：https://blog.csdn.net/Alira_/article/details/147718750

一、伪元素选择器

::before ::after

在同一层级的所有元素中，HTML默认在所有元素的最前面有个虚拟元素::before，在所有元素的最后面有个虚拟元素::after。
虚拟元素平时是不显现的，但可以在CSS代码中通过伪元素选择器设置虚拟元素的样式。

例如：

<!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{
            width: 15%;
            height: 30px;
            background-color: yellow;
            border: 2px green solid;
        }
    </style>
</head>
<body>
    <ul>
        <li id="li1">
        </li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

效果图如下：

二、伪类选择器

:link :visited :hover :active
伪类是超链接标签<a>和按钮标签<button>的一种虚拟的类属性（用于动态属性配置），可以在CSS代码中通过伪类选择器对这个虚拟的类属性进行设置。
:link 链接访问前的样式

:visited 链接访问后的样式

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

:active 链接被激活时的样式

这四个伪类选择器通常一起使用，以创建具有丰富交互效果的链接和按钮。
注意：
1 :link, :visited,:hover,:active这四个伪类从前到后的顺序不能颠倒，否则会影响浏览器的渲染。
2 有些浏览器对伪类的支持不太好，比如部分火狐浏览器无法支持:active属性

例如：

<!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: darkred;
        }
        #a1:visited{
            color: blueviolet;
        }
        #a2:hover{
            color: gold;
        }
        #a2:active{
            color: pink;
        }
    </style>
</head>
<body>

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

    <hr>

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


</body>
</html>

效果图如下：