a 标签的伪类的正确顺序，以及原因

时间：2017-05-28 21:44:14 阅读：297 评论：0 收藏：0 [点我收藏+]

注意，a 标签的伪类是有顺序的，否则有可能样式不对；lvha，

原因：浏览器的就近原则，举个例子：

我定义的顺序是a:visited、a:hover、a:link，这时候就会发现，不管我有没有hover上去，样式都是link的样式的，这是因为鼠标经过的未访问链接同时拥有a:link、a:hover两种属性，在第一种情况下，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。

所以，如果一个链接没有被访问过，那么它有可能同时拥有 link , hover 两个属性，不能让 link 写在后面，否则不管 hover 是否，都会显示link的样式；同样的道理，如果一个链接已经被访问过了，那么它有可能同时拥有visited , hover 两个属性，hover 要在 visited 的后面；

所以，我们总结出，要想让一个链接各个阶段都正常呈现样式，正确的顺序是 lvha ;

另外 :link 和 a的样式有可能会冲突

		#test{
			color:yellow;
		}
		#test:link{
			color:red!important;
		}
	
           
       <a href="#" id="test">sss</a>

总结：当 <a> 标签的 href 属性为空的时候，:link样式不会生效，所以正常的 color : yellow 会生效；当 <a> 标签的 href 属性不为空的时候，:link 样式才会生效，这时候，如果 <a> 标签正常样式和 a：link 冲突了的话，以写在后面的那个为准；

null

a 标签的伪类的正确顺序，以及原因

标签：lan test 顺序 ref 12px 重复 data line 显示

原文地址：http://www.cnblogs.com/dujuncheng/p/8a44d12f5dec0def9518321af4e71c22.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行