web前端-css中最直观的反馈-伪类及伪元素选择器的使用

简介: 前言上期给大家讲了css的一些选择器的使用,这期咱们一起学习css的另外两个选择器:伪类选择器以及伪元素选择器

文章目录

前言

css伪类选择器

:active

:link和:visited

:hover

伪类选择器合集

css伪元素选择器

伪元素合集

::after和::before

::first-letter

::first-line

::selection

小结

前言

上期给大家讲了css的一些选择器的使用,这期咱们一起学习css的另外两个选择器:伪类选择器以及伪元素选择器。


css伪类选择器

伪类用于定义元素的特殊状态。


设置鼠标悬停在元素上时的样式

为已访问和未访问链接设置不同的样式

设置元素获得焦点时的样式

:active

用于选择活动链接。当您在一个链接上点击时,它就会成为活动的。即设置鼠标点击触发的样式。


实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>伪类,伪元素</title>
    <style>
     a:active{
         background-color: antiquewhite;
         text-decoration: none;
         font-size:larger;
     }
    input:active{
        font-size: large;
        color: blue;
    }
    </style>
</head>
<body>
    <div>
        <a href="https://suliang.blog.csdn.net/" target="_blank">苏凉.py的博客</a><br>
        <p></p>
        <a href="https://www.baidu.com" target="_blank">百度一下</a><br>
        <p></p>
        <input type="submit" value="点击提交">
    </div>
</body>
</html>

`a2c6ddfdee09477fbe861ee128442f66.gif

:link和:visited

对未点击的链接和已点击的链接进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>伪类,伪元素</title>
    <style>
        a:link{
            color: blueviolet;
        }
        a:visited{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="https://suliang.blog.csdn.net/" target="_blank">苏凉.py的博客</a><br>
        <p></p>
        <a href="https://blog.csdn.net/weixin_46277553/article/details/124882898?spm=1001.2014.3001.5501">已点击的链接</a><br>
        <p></p>
        <a href="https://www.baidu.com">百度一下</a><br>
        <p></p>
        <a href="liajie">未点击的链接</a>
        <input type="submit" value="点击提交">
    </div>
</body>
</html>

image.png

:hover

鼠标悬停时的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>伪类,伪元素</title>
    <style>
        div{
            background-color: aqua;
            width: 300px;
            height: 120px;
        }
        a:active{
            background-color: antiquewhite;
            text-decoration: none;
            font-size:larger;
        }
        input:active{
            font-size: large;
            color: blue;
        }
        div:hover{
            background-color: bisque;
        }
        a:hover{
            font-size: larger;
            color: red;   
        }
        input:hover{
            font-size: larger;
        }
    </style>
</head>
<body>
    <div>
        <a href="https://suliang.blog.csdn.net/" target="_blank">苏凉.py的博客</a><br>
        <p></p>
        <a href="https://www.baidu.com" target="_blank">百度一下</a><br>
        <p></p>
        <input type="submit" value="点击提交">
    </div>
</body>
</html>

效果:

aee37b88ec9d44269eed7c4f4add8d6c.gif

上面列举了一些常用的伪类选择题。下面给大家把全部的伪类选择器列举出来,可以一个一个去实现。


image.png

image.png

image.png

css伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

例如,它可用于:

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

伪元素合集

image.png


<!DOCTYPE html>
<html lang="en">
<head>
    <title>伪元素选择器</title>
    <style>
        p::after{
            content:url(./img/picture.png);
        } 
        p::before{
            content: url(./img/picture.png);
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

image.png

::first-letter

选中元素的第一个字/字母/数字…

<!DOCTYPE html>
<html lang="en">
<head>
    <title>伪元素选择器</title>
    <style>
        p::after{
            content:url(./img/picture.png);
        } 
        p::first-letter{
            color:red;
            font-size: 70px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

image.png

::first-line

选择第一行

<!DOCTYPE html>
<html lang="en">
<head>
    <title>伪元素选择器</title>
    <style>   
        p::first-letter{
            color:red;
            font-size: 30px;
            background-color: antiquewhite;
        }
        p::first-line{
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。地崩山摧壮士死,然后天梯石栈相钩连。上有六龙回日之高标,下有冲波逆折之回川。黄鹤之飞尚不得过,猿猱欲度愁攀援。青泥何盘盘,百步九折萦岩峦。扪参历井仰胁息,以手抚膺坐长叹。</p>
    <p>问君西游何时还?畏途巉岩不可攀。但见悲鸟号古木,雄飞雌从绕林间。又闻子规啼夜月,愁空山。蜀道之难,难于上青天,使人听此凋朱颜!连峰去天不盈尺,枯松倒挂倚绝壁。飞湍瀑流争喧豗,砯崖转石万壑雷。其险也如此,嗟尔远道之人胡为乎来哉!</p>
    <p>剑阁峥嵘而崔嵬,一夫当关,万夫莫开。所守或匪亲,化为狼与豺。朝避猛虎,夕避长蛇;磨牙吮血,杀人如麻。锦城虽云乐,不如早还家。蜀道之难,难于上青天,侧身西望长咨嗟!</p>
</body>
</html>

image.png

::selection

设置选中时的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>伪元素选择器</title>
    <style>   
        p::first-letter{
            color:red;
            font-size: 30px;
            background-color: antiquewhite;
        }
        p::first-line{
            background-color: pink;
        }
       p::selection{
           background-color: green;
           color: yellow;
       }
    </style>
</head>
<body>
    <p>噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。地崩山摧壮士死,然后天梯石栈相钩连。上有六龙回日之高标,下有冲波逆折之回川。黄鹤之飞尚不得过,猿猱欲度愁攀援。青泥何盘盘,百步九折萦岩峦。扪参历井仰胁息,以手抚膺坐长叹。</p>
    <p>问君西游何时还?畏途巉岩不可攀。但见悲鸟号古木,雄飞雌从绕林间。又闻子规啼夜月,愁空山。蜀道之难,难于上青天,使人听此凋朱颜!连峰去天不盈尺,枯松倒挂倚绝壁。飞湍瀑流争喧豗,砯崖转石万壑雷。其险也如此,嗟尔远道之人胡为乎来哉!</p>
    <p>剑阁峥嵘而崔嵬,一夫当关,万夫莫开。所守或匪亲,化为狼与豺。朝避猛虎,夕避长蛇;磨牙吮血,杀人如麻。锦城虽云乐,不如早还家。蜀道之难,难于上青天,侧身西望长咨嗟!</p>
</body>
</html>


image.png

小结

前期的学习过程中,伪类和伪元素选择器给我们的反馈最直观,其中的一些还需大家实际操作后才能慢慢理解,后面我们逐渐的去了解其他一些知识点,一起加油!!下期再见!


相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
49 3
|
2月前
|
前端开发 JavaScript 测试技术
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
2月前
|
前端开发 测试技术 持续交付
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
27 4
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
33 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
46 2
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
215 1
|
2月前
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js
|
2月前
|
缓存 前端开发 JavaScript
探索现代Web开发中的前端性能优化策略
【10月更文挑战第5天】探索现代Web开发中的前端性能优化策略