a标签的LOVE HATE(爱恨原则)

首页 » 技术栈 » a标签的LOVE HATE(爱恨原则)

在网页开发中,我们常常会用到a标签及a标签的四种状态,那么关于这四种状态的顺序及编写代码时应当注意的问题,在这篇文章中做一点小结。

定义和概念

在支持 CSS 的浏览器中,链接的不同状态可以导致不同的方式显示,这些状态包括:未被访问状态,已被访问状态,鼠标悬停状态和活动状态。

a:link {color: #FF0000}                / 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 /

示例

假如我们在网页中期望a标签在鼠标点击访问后,颜色为黄色,在鼠标经过时,颜色显示为绿色,于是设置了a:visited和a:hover的样式:

<style type="text/CSS">
a:hover{color:green;}
a:visited{color:yellow;}
</style>
<a href="#">hello world</a>

然而浏览器显示的实际情况是,如果没有点击a标签,鼠标滑过,颜色会显示为绿色,但是当点击a标签,颜色变成黄色,鼠标滑过时颜色并没有显示为hover设置的绿色,而依旧显示为黄色。造成上述情况的原因是因为a:visited和a:hover的放置的顺序出现了错误。

在 CSS 定义过程中,有着这样的几个原则是需要我们注意和掌握的:

a:hover 必须被置于 a:link 和 a:visited 之后,才有效果的。

a:active 必须被置于 a:hover 之后,才有效果的。

伪类名称对大小写并不敏感。

按照此原则,我们修改之前的代码:

<style type="text/CSS">
a:visited{color:green;}
a:hover{color:yellow;}
</style>
<a href=”#”>hello world</a>

此时a标签不管是否被点击过,鼠标经过时都会显示为我们所预期的绿色。

另外还有一点是我们常会用到的,伪类可以与 CSS 类配合使用,如下:

a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

假如上面的例子中的a链接被访问过,那么它将显示为红色。

鼠标经过未访问链接时,会拥有a:link、a:hover两种属性,鼠标经过的已访问链接时,会拥有a:visited,a:hover两种属性。

如果正常链接和已访问过的链接样式相同,鼠标悬浮和点击时的样式相同,我们也可以将它们合并起来定义,而且大多数情况下,这样的设置是我们所需要的:

a:link, a:visited { color:#FF0000; text-decoration:underline;}
a:hover, a:active {color:#FF00FF;text-decoration:none;}

常见伪类

我们在这里列出的w3c的伪类,通过此表,可以清楚地看出哪些是属于css1,而哪些是属于css2。

属性描述CSS
:active向被激活的元素添加样式。1
:focus向拥有键盘输入焦点的元素添加样式。2
:hover当鼠标悬浮在元素上方时,向元素添加样式。1
:link向未被访问的链接添加样式。1
:visited向已被访问的链接添加样式。1
:first-child向元素的第一个子元素添加样式。2
:lang向带有指定 lang 属性的元素添加样式。2


小结

关于a标签的四种状态排序问题,根据其优先级先后原则,可以归纳为L->V->H->A——l(link)ov(visited)e h(hover)a(active)te,即网上流行的LoVe HAte(爱恨原则)。

打赏 赞(3)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

大家好!欢迎光临我的博客,在下就是闭月羞花沉鱼落雁才高八斗貌似天仙玉树凌风赛潘安一枝梨花压海棠人送外号上天下地无所不能美貌与智慧并存、古典与活泼的化身~~
觅·You小栈» a标签的LOVE HATE(爱恨原则)

版权声明: 本站原创文章,于2016年07月12日由觅·You发布,转载请注明出处

亭边总有花影,与我消遣一段旖旎的小时光

立即查看 联系作者
正在获取,请稍候...
00:00/00:00