:link,:visited,:focus,:hover,:active顺序详解

2018-02-03 10:25:16来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

      CSS 又名 层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究

      :link 与 :visited 在样式文件中的顺序可以随便放置

       而focus, hover,active这几个,如果你设置的顺序不同,那么会直接影响样式的显示效果。下面会详细解释顺序:focus -> :hover -> :active

 

        ①:link代表为访问链接的样式,所以只要你是超链接,且未被访问过,则链接都会按照你设定的样式显示,所以它的位置顺序无所谓;

        ②:visited代表链接访问后的样式,则链接一旦被访问,则之后它的样式就会是你所设置的visited样式

 

重点是下面这几个:

(1)先来说下focus与hover顺序:

        ③:focus 代表的是获取焦点时的样式,有人说啥是获取焦点时的样式,这个我们可以通过tab键来查看,一旦链接获取了焦点,则它的样式就是你设置的focus样式

        ④:hover 代表的是你光标经过某一元素时的样式,如果将此样式放在:focus之后,则当链接获取焦点时,显示:focus样式,当光标经过此链接时,会显示hover的样式,因为hover排在后,会覆盖focus样式。

         如果:hover排在前,:focus排在后,则当光标获得焦点时显示:focus的样式,但当光标经过链接时,样式并未显示:hover的样式,而是继续是:focus的样式,因为应用的focus样式在hover之后,覆盖了前面的样式。

 

(2)接下来说下hover和visited顺序

      之前在用a:hover属性的时候发现一个奇怪的问题,同一个页面里面有些链接的a:hover效果不能正常表现出来。链接的代码是一样,没有使用其它样式固定,搞的我莫名其妙。还以为是某个标签没有关闭,但是页面比较长,检查起来又嫌累,但是想来想去找不到其它原因,索性把浏览器一关,做别的事情去了。

      重新打开这个页面的时候,突然发现那个链接的a:hover效果又出来了。我想了一下,点了那个链接,然后回过头再点,果然又没了。连忙检查css文档,发现a:hover属性写在了visited之前,改写到之后,重试,ok!

以前看书的时候注意到css中关于链接表现的书写有提示说各属性顺序不能颠倒,一直没有注意,写的时候通常都很随意。现在看来不能这个顺序还是很重要的

 

css中关于超链接的五个属性一般正常顺序为:link,visited,focus,hover,active

 

 

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台