超链接伪类和伪元素

最新推荐文章于 2024-07-13 11:50:40 发布

可以打个电话吗?

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量102

点赞数

分类专栏： CSS学习笔记超链接伪类和伪元素文章标签： css

本文链接：https://blog.csdn.net/qq_49485801/article/details/124282872

版权

CSS学习笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

超链接伪类和伪元素

1 篇文章 0 订阅

订阅专栏

超链接伪类

用法如：
标签名：link
：link用来表示没有访问过的链接（正常链接）
：visited用来表示访问过的链接（由于隐私问题，visited这个伪类只能修改链接的颜色）
：hover用来表示鼠标移入后的状态
：active用来表示鼠标点击的状态

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color:red;
        }/*当这一行其效果时，表示页面中“b站”和“百度”显示为红色*/
        a:visited{
            color:green;
        }/*这一行其效果时，若点击页面中“b站”之后，则其字样显示为绿色*/
        a:hover{
            color:red;
        }/*这一行其效果时，若鼠标移入页面中“b站”之后，则其字样显示为红色*/
        a:active{
            color:green;
        }/*这一行其效果时，若鼠标点击（长按左键）页面中“b站”之后，则其字样显示为绿色*/
    </style>
</head>
<body>
    <a href="https://www.bilibili.com/" target="_blank">b站</a>
    <br><br>
    <a href="https://www.baidu.com/" target="_blank">百度</a>
    <br><br><br><br><br>
</body>

伪元素

表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
像：开头位置（当结构发生变化时样式效果不会发生改变）
：：first—letter表示第一个元素
：：first—line表示第一行
：：before 元素的开始
：：after 元素的开始
–before和after必须结合content属性来使用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       p::first-letter{
           color: red;
       }/*当这一行其效果时，表示页面中段落首个元素样式改变显示为红色，不论结构怎么变化都是第一个元素变红
       若删除a元素则h元素变红*/
       p::first-line{
           color: red;
       }/*当这一行其效果时，表示页面中段落第一行元素样式改变显示为红色，不论结构怎么变化都是第一行元素变红
       若删除ahjdakdakjskasjsdsad素则shdhhajdjajdkdsd元素变红*/
        p::before{
            content: '开始';
            color: green;
        }
       p::after{
           content: '结束';
           color: green;
       }/*当这两行其效果时，表示页面中段落第一行元素开头位置加入‘开始’元素，显示为绿色，
        最后一行末尾位置加入‘结束’元素，显示为绿色，不论结构怎么变化第一行元素开头都为
        ‘开始’元素，显示为绿色，末尾位置为‘结束’元素，显示为绿色，
       */
    </style>
</head>
<body>
<ul>
    <p>ahjdakdakjskasjsdsad<br>shdhhajdjajdkdsd<br>dsfsfdsdfsd</p>
</ul>
</body>

这是全部起效果的图片
请添加图片描述

可以打个电话吗?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超链接伪类和伪元素

目录超链接伪类伪元素一天一点点，慢慢累积！超链接伪类用法如：标签名：link：link用来表示没有访问过的链接（正常链接）：visited用来表示访问过的链接（由于隐私问题，visited这个伪类只能修改链接的颜色）：hover用来表示鼠标移入后的状态：active用来表示鼠标点击的状态<head> <meta charset="UTF-8"> <title>Title</title> <style>
复制链接

扫一扫