a标签的四个伪类元素

关于伪类，大家最熟悉的还是a标签的4个伪类：
:link        有链接属性时
:visited    链接地址已被访问过
:active   被用户激活(在鼠标点击与释放之间发生的事件)
:hover      其鼠标悬停

关于这四个伪类的排列次序，很多地方都能查到，可是为什么这么排列？从来没有见过有人提及。这里我就从技术、用户体验、优先级几个角度简单的阐述下我们为什么这么排列。

首先从技术层面上，

a的这四个伪类，分别表示了a的四种状态，要注意的是， a可以只具有一种状态（:link），或者同时具有2种或者三种状态！比如说，任何一个有HREF属性的a标签，在未有任何操作时都已经具备了:link的条件，也就是满足了有链接属性这个条件；如果访问过的a标签，同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上的时候，a标签就同时具备了 :link :visited :hover三种状态。

其次从用户体验的角度，

在用户使用超链接的时候，为了最佳的用户体验，要做到下面几点：

第一：不管是否是被访问过的超链接，只要我鼠标移上的时候(:hover)都要有写变化，比如变色、加下划线等等，告诉用户选中的是可以点击的超链接。

第二:不管是否访问过，在a标签被激活时（:active），都应该有相同的样式变化。也就是说，同一个a标签，未访问过时在被用户激活和被访问时再被用户激活时要有相同的样式。这个也很好理解，用户点下同一个超链接时的效果不应该有差别。

第三:访问过的a标签可能要跟没有访问过的a相区分。

从CSS优先级角度，

前面的文章讲过具体的css优先级，这里我要说的是对于同一优先级的相冲突样式，浏览器的选择问题。比如：
.test {color:red; color:green;}
或者：
.test {color:red;}
.test {color:green;}
上面两个例子中，大家都知道，对于这个.test指向的内容，浏览器会显示后一个属性设置。也就是color:green.

说到这里，很多人可能已经有头绪了。结合上面的三点，不难分析我们为什么要这么排。

第一：不管什么情况下鼠标悬停都应该有一个样式变化（:hover）,我们就把hover放在最后，防止具备其他状态时，被其他状态的设置覆盖掉。
第二：当a被激活时(:active)，我们要求不管是否访问过，都应该有相同的样式，也就是这个状态的效果应该能够覆盖未被访问时(:link)与已访问过(:visited)两种状态。应该放在 :link :hover的后面。
第三：被访问过的a（:visited）可能会有不一样的样式属性，用来区别a是否被访问过。也就是说:visited 状态的属性可以覆盖掉:link状态的属性，即 :visited 要放在 :link 的后面。

10.20日编辑记录

今天下午的时候，我的助教联系我问“a的四个伪类是不是 L V H A啊？而不是你讲的L V A H。新浪什么的都是这样的。我是从书上看的 love and hate。“

看到这个问题，我们不妨来看下H 和A 的关系。hover 和 active 分别表示鼠标悬浮在 a标签上和鼠标点下没有弹起的时候。不难发现，这两种状态是不会并存的，也不会存在谁要覆盖谁的问题。所以，不管是LVHA还是LVAH ，他们的效果都是一样的。

不过用LOVE AND HATE 的方式来记住这个排序是一种不错的方法，推荐新手使用。

原文地址：https://blog.csdn.net/cui_angel/article/details/7678947

a标签的四个伪类元素相关推荐

a标签的四个伪类是什么？如何排序？为什么？
爱恨分明原则: l v h a 注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 ! 注释:为了产生预期的效果,在 CSS 定义中,a ...
详解html5新增的标签与css3中伪类和伪元素
html5 / css3 基础篇(第一篇) 回顾是的,你没看错!今天是一个全新的开始,今天这一讲我们就要开始h5和c3了,html 和 css的基础篇我们都告一段落了.html一共两篇,css走过了 ...
a链接的四个伪类顺序
摘自: http://www.cnblogs.com/xiayi/p/5350423.html <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间 ...
认识伪类元素:before和:after
起因于不理解下图点的写法,后来发现是个很基础的东西运用了伪类元素:before,如下注意,他的css写法也是非常简洁高效的. 查阅了些关于伪类before和after的知识帮助理解, ...
使用CSS3伪类元素（::before|::after）对文字进行美化
如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源.所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法. ...
伪类元素--before和after
文章目录 1.基本用法 2.样式修改 3.清除浮动 5.content属性 1.string 2.attr() 3.url()/uri() 4.counter() before/after伪类相当于在 ...
JavaScript前端中的伪类元素before和after使用详解
在前端开发中,伪类是一种让你可以选择元素的某个状态或位置的 CSS 选择器.其中,:before 和 :after 伪类允许你在一个元素之前或之后插入内容. :before 和 :after 伪类创建 ...
html中after后面添加文字,使用CSS3伪类元素（::before|::after）对文字进行美化
如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源.所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法. ...
css伪类元素实现小圆点效果
前言: 使用伪类元素 ::before,::after 来实现小圆点效果. 效果图: 实现方式: 1.父级元素 postion:relative; //定位属性,可为absolute //必须 ...
关于超链接的四个伪类的一个问题（顺序问题）
在使用超链接的伪类的时候,要使用如下顺序,否则其中的某些效果将会没有效果 [注释:link和visited的顺序无所谓] a:link 设置a对象在未被访问前的样式表属性. ...

a标签的四个伪类元素

a标签的四个伪类元素相关推荐

最新文章

热门文章