CSS考点之一，<a>标签，伪类

LeanCloud 发布于2019-08-30 13:21 / 2245人阅读

摘要：注意，鼠标点击后不松开，此伪类一直激活，直到松开鼠标。哪些伪类会同时激活并影响显示效果第一，其实和两个伪类之间顺序无所谓。此时链接依然存在，只是已经被访问过，所以伪类不再激活。

博主的博客地址：Stillwater的个人博客
转载请注明原文链接

一、标签常用的伪类概述

    a:link{color:blue}                                                     
    a:visited{color:red}
    a:hover{color:green}
    a:active{color:purple}

link 当有链接，且该链接未被访问过时，此伪类处于激活状态。

vistied 某个链接已经被访问过时，此伪类处于激活状态。

hover 鼠标悬停在某个链接上时，此伪类处于激活状态，直到鼠标移开链接。

active 用鼠标点击链接时，此伪类激活。注意，鼠标点击后不松开，此伪类一直激活，直到松开鼠标。

二、标签伪类书写顺序详解 为什么要考虑伪类的书写顺序？

第一，CSS（Cascading Style Sheets）全称翻译为层叠样式表。有时候多条规则会定义元素的同一个属性，这时该怎么办呢？CSS用层叠的原则来考虑样式声明，从而判断相互冲突的规则中哪个规则应该起作用。首先，你编写的样式如果与浏览器的默认样式冲突，均以你编写的样式为准。在此基础上，CSS用层叠的原则来考虑特殊性（specificity）、顺序（order）和重要性（importance），从而判断相互冲突的规则中哪个规则应该起作用。不要受这些术语的影响，你只要去试，就能明白CSS决定该应用哪些样式以及何时应用这些样式的方式。¹
第二，由于标签的这四个伪类的特殊性是一样的，所以当某个链接处于的状态同时激活多个伪类时，那么伪类的书写顺序就起到了关键作用，从而影响最终的显示效果。这就是为什么我们要考虑伪类的书写顺序。

哪些伪类会同时激活并影响显示效果？

第一，其实:link和:visited两个伪类之间顺序无所谓。因为它俩不可能同时触发，即在未访问的同时访问过。此处注意，有人将:link理解成只要某元素有链接存在，就会激活，这是错误的。当链接被访问过以后，:link就不再激活。我们做个试验。

a:visited{color:red}                                                 
a:hover{color:green}
a:active{color:purple}
a:link{color:blue}

我们把:link放在最后，开始时链接未访问，无论是我鼠标悬浮还是点击，颜色都不会改变，都是蓝色。当我第一次点击鼠标并松开后，颜色变成红色。然后再悬浮就会变成绿色，再点击，就会变成紫色，再松开就恢复成红色。蓝色不会再出现。此时链接依然存在，只是已经被访问过，所以:link伪类不再激活。
第二，从用户习惯角度考虑，无论链接访问或未访问过，都希望当鼠标悬浮在链接上时能够产生颜色变化，并且，无论链接访问或未访问过，产生的颜色变化应该是一样的。所以应该把:hover放在:link和:visited后面

a:link{color:blue}                                                 
a:visited{color:red}

a:hover{color:green}

第三，从用户习惯角度考虑，无论链接访问或未访问过，都希望当鼠标点击链接时能够产生颜色变化，并且，无论链接访问或未访问过，产生的颜色变化应该是一样的。所以应该把:active放在:link和:visited后面

a:link{color:blue}                                                
a:visited{color:red}

a:active{color:purple}

第四，顺序上，总是先将鼠标悬浮在链接上，然后才能够进行点击操作，预期效果是悬浮时产生颜色变化，点击鼠标时产生另一种颜色变化。若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前。²

a:link{color:blue}                                                   
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}

记住顺序的口诀：“LoVe，HA”

HTML5与CSS3基础教程（第8版）第七章第四节，[美] Elizabeth Castro　Bruce Hyslop　著，望以文　译。 ↩

引用自链接的四个伪类顺序。 ↩

GPU云服务器云服务器 asp &lt&gt asp &lt= &gt aspx &lt&gt aspx &lt=&gt

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115503.html

html之css选择器学习

相关内容：什么是css选择器标签选择器类选择器id选择器并集选择器（分组选择器）交集选择器后代选择器子标签选择器属性选择器相邻兄弟选择器伪类选择器伪元素选择器（伪对象选择器）首发时间：2018-03-02 修改：2018-04-30：修改了排版，增加了伪类选择器，伪元素选择器，在原本简略的介绍的基础上增加了描述并修改了某些术语描述。2018-05-05：修改了部分伪类选择器的注解，由于之前发生了小...

番茄西红柿 2019-04-23 13:46 评论0 收藏0
前端页面总结

摘要：定位使元素的位置与文档流无关，因此不占据空间。它的行为就像而当页面滚动超出目标区域时，它的表现就像，它会固定在目标位置。此元素会被显示为内联元素，元素前后没有换行符。以下内容部分转载自菜鸟教程CSS层叠样式表(CascadingStyleSheets)内联：内嵌：外部样式文件：[object Object]rel 属性，规定当前文档与被链接文档/资源之间的关系。优先级：内联>内嵌>...

番茄西红柿 2019-04-23 11:40 评论0 收藏0
css

摘要：如内可以包含块级元素与块级元素并列内联元素与内联元素并列。而对于使用脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。css概念　　CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。css引入方式1. 行内式　　行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用...

番茄西红柿 2019-04-23 13:25 评论0 收藏0
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素

摘要：在随后的版本中，团队一直在修改原生弹窗的表现。所以这种原生弹窗的最大用处不是用来提示用户信息，而是伤害用户。团队在中移除了对弹窗的支持。获取用户输入可以用中的元素。作为的元素，目前除了和以外，其它浏览器均未支持。自 1995 年 JavaScript 诞生之初，就包含了 3 个方法 alert()、confirm() 和 prompt()。在随后的 Chrome 版本中，Chrome...

philadelphia 2019-08-29 12:49 评论0 收藏0