超连接的四种状态的应用详细讲解

所属分类: 网页制作 / HTML/Xhtml 阅读数: 789
收藏 0 赞 0 分享

虽然你认为可能原因是浏览器问题,但是更多的可能是你样式定义时顺序错误。为了保证能看到不同状态下的连接样式,正确的样式顺序应该是:

" link - visited - hover - active "或" LVHA "(缩写)。

核心内容:

每个选择符selector都有一个“specificity”如果两个selectors应用于同一个元素,具有较高specificity的选择符将胜出,具有优先权。例如:

P.hithere {color: green;} /* specificity = 1,1 */P {color: red;} /* specificity = 1 */

任何设置了类class=hithere的段落内容显示为绿色而不是红色。两个selectors都设置了颜色,但是具有更高specificity的选择符将胜出。

伪类如何影响specificity呢?它们具有完全相同的加权值,下列样式具有相同的specificity加权值:

A:link {color: blue;} /* specificity = 1,1 */A:active {color: red;} /* specificity = 1,1 */A:hover {color: magenta;} /* specificity = 1,1 */A:visited {color: purple;} /* specificity = 1,1 */

这些都是用于超链接的样式设置。大部分情况下需要同时设置其中的几个样式,例如,一个未被访问的超链接在鼠标悬停和点击时可设置“鼠标悬停”和“鼠标激活“两种状态下的不同样式,由于上述三个规则都可应用于超链接,并且全部选择符具备相同的specificity,那么根据规则,最后一个样式“胜出”。所以" active "式样永远也不会显示出来,因为它总是被" hover "式样覆盖(即" hover "优先)。现在再来分析一下已经被访问过的超链接鼠标悬停是什么效果,结果永远是purple紫色的:( ,因为它的" visited "式样总是优先于其它的状态样式规则(包括" active "和" hover")而显示。

这就是为什么CSS1推荐样式顺序的原因:

A:linkA:visitedA:hoverA:active

实际上,开头两个样式的顺序可以调换,因为一个超链接不可能同时存在“未访问”和“已访问”两种状态。( :link意思是" unvisited ";我不知道为什么不这样定义呢.)

CSS2现在允许伪类可以以“联合成组”形式出现,例如:

A:visited:hover {color: maroon;} /* specificity = 2,1 */A:link:hover {color: magenta;} /* specificity = 2,1 */A:hover:active {color: cyan;} /* specificity = 2,1 */

They have the same specificity, but they apply to fundamentally different beasts, and so don't conflict. You can get hover-active combinations, for example.

如何理解本文当中所涉及到的“specificity”呢?specificity可以理解未简单地连在一起的号码字符串,上面的一个例子:P.hithere {color: green;} /* specificity = 11 */P {color: red;} /* specificity = 1 */

这好像是一个基于十进制的简单运算。然而计算“specificity”不能使用十进制算法,例如你把15种选择符连在一起使用、它们具有的“specificity”加权值还是比简单的class选择符低。举例:

.hello {color: red;} /* specificity = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = 15 */

" 10 "实际上是一个“1”后面接着“零”、不是"十",我们可以使用十六进制描述前面的样式规则的specificitiy,像下面:

.hello {color: red;} /* specificity = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = F */

唯一的问题是如果你想为第二个样式规则增加两个或更多的选择符时,那时你就可能得到一个“17”的specificity、会再一次混淆。事实上specificity可能是无穷大的,所以为了避免更多的混乱,建议使用逗号来分隔specificity的值。

站长建议:反复练习specificity的加权值的计算,网站CSS的设置体现了你控制页面的能力,在动态网站开发中,CSS的地位也是非常重要的,多看资料,多练习,多来脚本之家!如果你喜欢本站就代为宣传吧!谢谢阅读。

更多精彩内容其他人还在看

浅谈HTML代码中的空格和空行

下面小编就为大家带来一篇浅谈HTML代码中的空格和空行。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

全面了解html.css溢出

下面小编就为大家带来一篇全面了解html.css溢出。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

htm初学笔记(新手必看)

下面小编就为大家带来一篇htm初学笔记(新手必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML中文件上传时使用的<input type="file">元素的样式自定义

这篇文章主要介绍了HTML中文件上传时使用的<input type=
收藏 0 赞 0 分享

关于input的file 控件及美化

下面小编就为大家带来一篇关于input的file 控件及美化。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Html/Css(新手入门第一篇必看攻略)

下面小编就为大家带来一篇Html/Css(新手入门第一篇必看攻略)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML 隐藏滚动条和去除滚动条的方法

这篇文章主要介绍了HTML 隐藏滚动条和去除滚动条的方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

浅谈html标签的显示模式(块级标签,行内标签,行内块标签)

下面小编就为大家带来一篇浅谈html标签的显示模式(块级标签,行内标签,行内块标签)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

html制作细线表格的简单实例

下面小编就为大家带来一篇html制作细线表格的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML中table表格标签的基础学习教程

用table标签在Web上显示表格内容是HTML所具有的最基本功能之一,这里我们就来看一下HTML中table表格标签的基础学习教程,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多