前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一、前端基础-css-css选择器之伪类

一、前端基础-css-css选择器之伪类

原创
作者头像
堕落飞鸟
发布2022-02-11 08:50:06
3820
发布2022-02-11 08:50:06
举报
文章被收录于专栏:飞鸟的专栏
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: red;
        }
        a:visited{
            color: purple;
        }
        a:hover{
            color: aqua;
        }
        a:active{
            color: black;
        }
        p:before{
            content: "这是before添加的内容";
            color: coral;
        }
        p:after{
            content: "这是after添加的内容";
            color: darkgoldenrod;
        }
    </style>
</head>
<body>
<!-- 伪类
    用于向某些选择器添加特殊的效果
    1、a:link:未访问的链接
    2、a:visited:已访问的链接
    3、a:hover:悬浮(鼠标移动到链接上)
    4、a:active:选定的链接
    注:1、在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
        2、在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
        3、伪类名称对大小写不敏感。
    5、before:在标签内容前添加内容,也可以设置颜色等。
    6、after:在标签内容后添加内容,也可以设置颜色等。
-->

<!-- 通过伪类给超链接添加特殊效果
    1、a:link:未访问的链接,未被点击过的链接颜色
    2、a:visited:已访问的链接,已被点击过的链接的颜色
    3、a:hover:悬浮(鼠标移动到链接上)颜色
    4、a:active:选定的链接颜色
-->
<a href="https://www.baidu.com">百度</a>

<!-- before和after
    1、before:在标签内容前添加内容,也可以设置颜色等。
    2、after:在标签内容后添加内容,也可以设置颜色等。
 -->
<p> 这是原本的内容 </p>
</body>
</html>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档