视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
超连接的四种状态的应用详细讲解
2020-11-27 14:45:31 责编:小采
文档

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

" 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的地位也是非常重要的,多看资料,多练习,多来脚本之家!如果你喜欢本站就代为宣传吧!谢谢阅读。

下载本文
显示全文
专题