详解链接的五个伪类
来源:互联网 发布:网络歌手男歌手 编辑:程序博客网 时间:2024/06/06 09:19
HTML中的A元素共有五个伪类,很多人难以区别他们之间的关系,并且很多文档上都没有说清楚活的链接与激活的链接之间的关系,下面我们来详细说明他们之间的区别。
在页面中输入下面的html代码,记住不要设置href属性。
<a>STI TEAM</a><a href="javascript:;">STI TEAM</a><a href="#123">STI TEAM</a>
为页面中的A元素添加如下样式。
a { color : #ccc;}a:link { color : blue;}a:hover { color : green;}a:visited { color : pink;}a:focus { color : yellow;}a:active { color : red;}
我们发现,第一个A元素的颜色为#ccc,而其他两个A元素的颜色为蓝色,所以我们可以得出第一个结论,:link指的是具有href属性的A元素,表明它是一个可用的链接。
在三个A元素上挥动鼠标,我们发现所有的A元素都会变为绿色,所以:hover指的是鼠标划过的样式。
在三个A元素上点击鼠标,按住鼠标不放,记住按住鼠标不放,我们发现链接的颜色会变为红色,所以:active指的是即将激活的链接,关键在于即将。
点击鼠标后,我们发现第二个、第三个链接的颜色会立即变为黄色,但点击页面的其他地方,第三个链接的颜色会变为粉色,所以:focus是指当前获取到焦点的链接,:visited是指访问过的链接。
此外,通过上面的操作,我们还发现:
1. href设置为javascript:;或javascript:void(0);不会保留被点击的状态,也就是说没有:visited伪类。
2. 没有href的链接没有:visited、:focus与:link伪类,并且鼠标样式不会发生变更。
3. 改变CSS的顺序,将:focus放在:visited之前,则点击后的样式一直为:visited,所以伪类之间没有优先级关系。
0 0
- 详解链接的五个伪类
- 链接伪类的应用
- 链接 <a> 的CSS伪类不起作用
- 链接标签a 的伪类
- 5.链接伪类
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性:伪类和伪元素的区别
- a链接,样式,伪类
- CSS链接、列表、伪类
- CSS伪类链接[译转]
- CSS中定义链接样式的四个伪类
- UVA - 11988 Broken Keyboard(用数组实现链表)
- OC学习日记012(二)类目、延展
- 生产环境下应该如何搭配hadoop生态系统个组件版本
- 【转载】ASP.NET dropdownlist总是获取第一个值
- java this 关键字
- 详解链接的五个伪类
- Http URLConnector 下载一个网络图片
- HIHO #1175 : 拓扑排序·二
- css控制图片拉伸不变形
- sping注解cache
- Java写本地ORC文件(Hive2 API)
- Java NIO系列教程(七) FileChannel
- Android 文件选择的使用
- Python实例浅谈之三Python与C/C++相互调用