web

a:link、a:visited、a:hover、a:activ

2017-03-07  本文已影响57人  DecadeHeart

预期效果:未访问链接颜色为蓝色,活动链接为绿色,  已访问链接为红色,活动链接为绿色,已访问链接为红色
第一种情况:我定义顺序是a:visited、a:hover/a:link,这时将鼠标放到未访问过的蓝色链接上,他并不变成绿色,只有放在访问过的红色链接上,链接才会变绿
第二种情况:我把css定义顺序调整为:a:link、a:visited、a:hover这时,无论鼠标是否经过的链接有没有访问过,他都会变成绿色

这是因为,一个鼠标经过未访问链接同时拥有a:link、a:hover两种属性,在第一种情况下,a:link离它最近,所以优先,所以它优先满足a:link,而放弃a:hover的重复定义
第二种情况中,无论链接有没有被访问过,他首先要检查是否符合a:hover标准,及是否有鼠标经过他,满足,则变成绿色,不满足,则继续向上查找,一直到满足条件的定义为止

总结:在css中,如果对于相同元素有针对不同条件的定义,应该将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件

这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果。
当然,如果故意打乱顺序,也会造成一些特殊的效果。比如,可以为链接制造出下划线颜色与文字颜色的差异。
近日突然发现,原来这个CSS问题早已有高人提出啦。还是个老外呢。他给总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。
再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .

最后经验补充:
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性,后面的属性会覆盖前面的属性定义;
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性,后面的属性会覆盖前面的属性定义;
所以说,a:hover定义一定要放在a:link、a:visited的后面,,,

上一篇 下一篇

猜你喜欢

热点阅读