一般用户可以通过设置a:link、a:hover、a:visited和a:active等几个元素,定义CSS链接的效果。
而这几个伪类样式,在定义过程中应该注意其顺序。顺序不同可以使链接显示的效果不同。
例如,访问链接颜色为蓝色,活动链接为绿色,已访问链接为红色。
第一种情况:定义的顺序是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中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。
还没有评论,来说两句吧...