首页 > 代码库 > a 标签的伪类的正确顺序，以及原因

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

2024-09-27 05:47:01   219人阅读


注意，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的样式有可能会冲突
  1. 		#test{
  2. 			color:yellow;
  3. 		}
  4. 		#test:link{
  5. 			color:red!important;
  6. 		}
  7. 	
  8.            
  10.        <a href="#" id="test">sss</a>
总结：当 <a> 标签的 href 属性为空的时候，:link样式不会生效，所以正常的  color : yellow 会生效；当 <a> 标签的 href 属性不为空的时候，:link 样式才会生效，这时候，如果 <a> 标签正常样式 和 a：link 冲突了的话，以写在后面的那个为准；


null


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


联系
我们