a链接的四个伪类顺序

摘自： http://www.cnblogs.com/xiayi/p/5350423.html

　<a>元素的作用是可以创建一个链接，链接对应4个状态：未访问，已访问，鼠标悬停，鼠标点击瞬间。

　　为了给链接的4个状态应用样式，引入伪类的概念。

　　什么是伪类呢？简单点说，就是你没定义这个类，但它确实作为一个类来使用。（这些类确实存在，浏览器在后台会向这些类增加和删除元素）

　　我在看《CSS设计指南》时，它说到四个伪类的书写顺序一定要正确，否则浏览器可能不会显示预期的结果。

　　也即这样写：

a:link{color:black;}
a:visited{color:gray;}
a:hover{color:red;}
a:active{color:blue;}

　为什么必须得按顺序呢？

　　这个问题可以这样来解答。

　　首先注意关键的两点：1.这4个伪类特指度相同。2.一个链接可能同时处于多种状态，即同时属于多个伪类。

　　好，现在来详细剖析。

　　未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，<a>链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。

　　再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前

　　其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。

　　最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）

　　记这顺序有个小招数，“LoVe？ HA!”。

转载于:https://www.cnblogs.com/facial/p/5816186.html

a链接的四个伪类顺序相关推荐

关于超链接的四个伪类的一个问题（顺序问题）
在使用超链接的伪类的时候,要使用如下顺序,否则其中的某些效果将会没有效果 [注释:link和visited的顺序无所谓] a:link 设置a对象在未被访问前的样式表属性. ...
CSS样式内联选择器选择器优先级伪类顺序
日期:2020-10-02 作者:19届WY 标签:CSS选择器相关内容一.html简介&CSS简介 == html简介 : 结构:决定网页的结构及内容,即"显示哪些内容" ...
【前端就业课第一阶段】HTML5 零基础到实战（四）伪类与伪元素
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面. 参加1_bi ...
a标签的四个伪类是什么？如何排序？为什么？
爱恨分明原则: l v h a 注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 ! 注释:为了产生预期的效果,在 CSS 定义中,a ...
a:link a:visited a:hover a:active四种伪类选择器的区别
a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接,用来告诉用户 ...
HTML5 零基础到实战（四）伪类和伪元素笔记
图解CSS伪类和伪元素
1 简介伪类和伪元素都属于CSS选择器的附加关键字,在形式上,用单冒号:表示伪类,用双冒号::表示伪元素,如: // 伪类 div:hover {}// 伪元素 div::after {} 注意:由 ...
html css链接伪类大全,什么是css链接伪类？
什么是css链接伪类?下面本篇文章就来给大家介绍一下css链接伪类是什么?有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 什么是css链接伪类? css链接伪类就是css内置 ...
伪类选择器的简单介绍
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...

a链接的四个伪类顺序

a链接的四个伪类顺序相关推荐

最新文章

热门文章