a标签的四种伪类顺序
来源:互联网 发布:江西省干部网络 编辑:程序博客网 时间:2024/05/15 23:43
关于伪类,大家最熟悉的还是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标签,未访问过时在被用户激活和被访问时再被用户激活时要有相同的样式。这个也很好理解,用户点下同一个超链接时的效果不应该有差别。
: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 的后面。
0 0
- a标签的四种伪类顺序
- 基础篇 - a标签的四伪类顺序
- a标签伪类排列的顺序
- 关于a标签的onclick与href的执行顺序
- 关于a标签的onclick与href的执行顺序
- a标签的四个伪类使用顺序
- <a>标签href与js(onclick)的触发顺序
- a标签的各个伪类书写顺序
- CSS中A标签的a:link a:visited a:hover a:active 原来是有严格的顺序的
- IE6 a href onclick 执行顺序 && IE6下a标签发ajax请求的深坑
- A标签的四个属性 link ,visited , hover ,active 原来是有顺序的! LVHA
- CSS中a标签的样式简介 链接定义的顺序
- Struts2 标签和标签顺序的问题
- mybatisXML配置文件的标签顺序
- CSS中a标签样式原则 a:link a:visited a:hover a:active执行顺序
- a标签的target
- a标签的使用
- a标签的href
- Secure Delivery Center (SDC)功能概述
- JDK7新特性详细说明及代码示例
- xcode开发快捷键
- 产品体验分析:国内APP实战!揭秘京东Apple Watch V1.0设计全过程
- 使用了非托管的第三方库的c++动态库在c#中的调用
- a标签的四种伪类顺序
- hadoop-2.6.0伪分布式安装后启动服务及测试
- Linux基础(五):软件包
- ANDROID L - Material Design详解(视图和阴影)
- Motion Wiki Home Motion - Related Projects
- Eclipse定制视图和new菜单
- c/c++创建删除文件 文件夹
- ReactiveCocoa - iOS开发的新框架
- cocos2dx 常见的49中动作