link,visited,focus,hover,active详解.pdfVIP

:link,:visited,:focus,:hover,:active详解 CSS 又名 层叠样式表，所谓层叠，就是后面的样式会覆盖前面的样式，所以在样式表中，各样式排列的顺序很有讲究。 :link 与 :visited 在样式文件中的顺序可以随便放置。 而 focus ，hover ，active 这几个，如果你设置的顺序不同，会直接影响样式的显示效果，下面会详细解释。 :focus - :hover - :active 有些人可能会困惑，为什么必须要按这样的顺序，而不能打乱呢？ 其实他们每一个选择器都代表一个含义。 :link 代表为访问链接的样式，所以只要你是超链接，且未被访问过，则链接都会按照你设定的样式显示，所以它的位置顺序无所谓。 :visited 代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的 visited 样式 重点是下面这几个： :focus 代表的是获取焦点时的样式，有人说啥是获取焦点时的样式，这个我们可以通过 tab 键来查看，一旦链接获取了焦点，则它 的样式就是你设置的focus 样式 :hover 代表的是你光标经过某一元素时的样式，如果将此样式放在:focus 之后，则当链接获取焦点时，显示:focus 样式，当光标经 过此链接时，会显示 hover 的样式，因为 hover 排在后，会覆盖 focus 样式。 如果:hover 排在前，:focus 排在后，则当光标获得焦点时显示:focus 的样式，但当光标经过链接时，样式并未显示:hover 的样式，而是继续是:focus 的样式，因为应用的focus 样式在 hover 之后，覆盖了前面的样式。 测试代码如下: a:focus{ color:#AA80FE; text-decoration:underline; } a:hover{ color:#FF0000; text-decoration:underline; } a:hover{ color:#FF0000; text-decoration:underline; } a:focus{ color:#AA80FE; text-decoration:underline; } :active 代表元素被激活时的样式，也就是元素被按下时的样式，如果:active 选择器与 :focus , :hover 调换位置，则显示的效果也 会不同，因为排在后面的样式，会覆盖前面的样式。 测试代码如下： a:hover{ color:#FF0000; text-decoration:underline; } a:active{ color:#FFCC00; } a:active{ color:#FFCC00; } a:hover{ color:#FF0000; text-decoration:underline; } 你可能会问，css 是层叠样式表，那是不是就意味着写在后面的样式一定会覆盖前面的样式呢？ 大家可以看另一篇教程： 《CSS 中选择器优先级顺序实战讲解》