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

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

一、伪元素(创造虚拟元素)

1、概念

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

2、属性

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

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

代码如下:

html 复制代码
<!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 伪类样式即可。

运行代码如下:

html 复制代码
<!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>

运行结果如下:

点击链接前的效果

鼠标悬停在链接上的效果

点击链接后的效果

相关推荐
江城开朗的豌豆2 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan5 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程14 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea8 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴9 小时前
Mix
前端·webgl
代码续发10 小时前
前端组件梳理
前端
试图让你心动10 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码11 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass