深入理解伪元素与伪类元素

在“探秘盒子浮动，破解高度塌陷与文字环绕难题，清除浮动成关键！”中，我们讲到如果父盒由于各种原因未设置高度，子盒的浮动会导致父盒的高度塌陷。为了解决高度塌陷的问题，我们可以添加伪元素。

一、伪元素（创造虚拟元素）

1、概念

伪元素可以创建一些不在文档树中的元素，并为其添加样式。其中，::before 和::after 伪元素是最为常用的。

2、属性

::before 伪元素可以在元素内容的前面插入额外的内容。比如，我们可以为一个标题添加一个装饰性的图标，通过::before 伪元素来实现。

::after 伪元素则在元素内容的后面插入内容。例如，为一个段落添加下划线效果，或者在列表项后面添加一个特殊的符号。

代码如下：

<!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>
</head>
<style>
    section{
        border: 4px solid #000;
        background-color: bisque;
    }
            #div1{
                width: 15%;
                height: 100px;
                background-color: aqua;
                border: 5px solid #000;
                margin-bottom: 5px;
                float: left;
             }

             #div3{
                width: 10%;
                height: 100px;
                background-color: pink;
                border: 5px solid #000;
                margin-bottom: 5px;
                float: left;
             }
    section{
        border: 4px solid #000;
    }
    footer{
            width: 100%;
            height: 100px;
            background-color:orange;
            border: 5px solid #000;
             }
        /* 伪类选择器 */
    .clear_ele::after{
            content: ""; /* 这是必须配置的属性，代表这个盒子的存在 */
            display: block;
            clear: both;
            }</style>
<body>
    <section class="clear_ele">
        <!-- ::before -->
        <div id="div1"></div>
        <div id="div3"></div>
        <!-- ::after -->
    </section>
    <footer>网页页脚</footer>
</body>
</html>

运行结果如下：

这与之前的 “<div style="clear: both;" id="div5"></div>”相似，都可以解决网页因为浮层而产生高度塌陷的问题，添加伪元素可以不破坏网页代码的骨架，所以比较推荐大家使用。

二、伪类元素

1、伪类选择器的运用

主要运用于导航栏或者超链接的样式设计

在默认的浏览器方式下,超链接统一为蓝色并且带有下画线。访问过的超链接则为紫色并且也有下画线。

这种最基本的超链接样式已经无法滿足设计人员的要求。通过 css可以设置超链接的各种属性,而且通过伪类还可以制作出许多动态效果。

2、属性

link:访问前的样式；
active：点击时的样式；
visited ：访问后的样式；
hover：鼠标悬停在上面的样式

需要说明的是，这 4 种状态的顺序不能颠倒。否则可能会导致伪类样式不能实现。这4种状态并不是每次都要用到,一般情况下只需要定义链按标签的样式以及：hover 伪类样式即可。

运行代码如下：

<!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>
</head>
<style>
    .clear_ele a{
        text-decoration: none;
    }
        /* 访问前的样式 */
        .clear_ele a:link{
        color: black;  
    } 
         /* 访问后的样式 */
        .clear_ele a:visited{
        color: blue;  
    }
    .clear_ele a:hover{
        /* 鼠标悬停在上面，文字的颜色 */
        color: red;
    }
   
</style>
<body>
    <section class="clear_ele">
        <a href="#">百度一下，你就知道</a>
    </section>
</body>
</html>

运行结果如下：

点击链接前的效果