a标签应用中，一般有四个状态：

鼠标未移入前（link），鼠标移入时（hover），

鼠标点击时（active），鼠标点击后（visited）。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <style type="text/css">

            body{

                padding: 200px 0;

            }

            a {

                font-size: 50px;

            }

            /*未访问时*/

            a:link {

                color: green;

            }

            /*已访问后*/

            a:visited {

                color: blue;

            }

            /*鼠标浮上*/

            a:hover {

                color: red;

            }

            /*正在点击*/

            a:active {

                color: yellow;

            }

        </style>

    </head>

    <body>

        <a href="https://www.baidu.com">aaa</a><br />

        <a href="http://www.shenchang.com">wode</a><br />

        <a href="https://www.qq.com">QQ</a><br />

        <a href="https://www.qq.com">weixin</a>

    </body>

</html>

a标签的伪元素的应用——link，hover，visited，active的更多相关文章

  1. 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

    1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...

  2. css 伪类: 1)a:link , a:visited, a:hover, a:active 2):first-child

    1. 链接伪类: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&qu ...

  3. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  6. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  7. 常用伪元素及content属性值的使用

    1.常用伪元素有 after.before,使用方法,如下 a:after{ display:block; content:''; } 2. content: "/\00a0";/ ...

  8. css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

    CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在 ...

  9. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

随机推荐

  1. 通俗的解释JAVA wait/notify机制

    生活中,我们常遇到需要等待的场景,例如去银行办事,在没轮到自己之前需要一直等待,但是如果需要自己每隔几秒钟就去柜台前看看状况,那肯定是种非常低效和令人恼火的体验.而实际的情况是,接待员会让您拿个号,说 ...

  2. Java与算法之(1) - 冒泡排序

    冒泡排序法的原理是,每次比较相邻的两个元素,如果它们的顺序错误就把它们交换过来. 例如对4 3 6 2 7 1 5这7个数字进行从小到大的排序,从最左侧开始,首先比较4和3 因为是从小到大排序,4和3 ...

  3. [51nod1197]字符串的数量 V2

    用N个不同的字符(编号1 - N),组成一个字符串,有如下要求: (1) 对于编号为i的字符,如果2 * i > n,则该字符可以作为结尾字符.如果不作为结尾字符而是中间的字符,则该字符后面可以 ...

  4. vue安装babel依赖报错

    刚刚因为一些原因把依赖包删除,重新install了一下,结果报错 deprecate babel-preset-es2015@* ???? Thanks for using Babel: we rec ...

  5. UEP-下拉

    uep建立下拉 静态下拉: ①private Map<String,String> beanMap = new HashMap<String,String>(); //gett ...

  6. 【CC2530入门教程-增强版】基础技能综合实训案例（基础版）-上位机源码

    [CC2530入门教程-增强版]基础技能综合实训案例(基础版)-上位机源码 广东职业技术学院  欧浩源 一.需求分析 按照指定参数打开串口,与测控终端建立数据传输通道,并根据应用要求实现程序逻辑,具体 ...

  7. 本地phpstudy开发中apache可以用，nginx不可用，

    倒腾半天,在控制面板中,windows防火墙中关闭防火墙即可, http://blog.csdn.net/vic0228/article/details/70756450

  8. 通过JiaThis API接口自定义分享功能按钮实现分享功能本地化

    http://www.mdaima.com/jingyan/20.html 最早李雷博客采用的是百度分享插件,为此还发过博文讲解如何在一个页面调用多个按钮分享不同的文章,感兴趣的朋友可以在本站搜索一下 ...

  9. 苹果新贵 Swift 之前世今生

    摘要 : 做为一个70后程序员,克里斯先后发明了 LLVM.Clang 和 Swift,请问你做了什么?   上 周出差劳顿,这篇文章几次动笔都未完成,常常躺倒床上就昏睡过去.南方的天气闷热潮湿,让我 ...

  10. pjtool用到的数据库----oracle范畴

    PL/SQL Developer 专门面向Oracle数据库存储程序单元的开发 PL/SQL:过程化SQL语言