CSS入门(5)--CSS中的超链接a

1                       a:link{

2                               color:red;

3                        }

4                        a:visited{

5                               color:orange;

6                        }

7                        a:hover{

8                               color:green;

9                        }

10                     a:active{

11                            color:black;

              }

:link      表示， 用户没有点击过这个链接的样式。是英语“链接”的意思。

:visited    表示，用户访问过了这个链接的样式。 是英语“访问过的”的意思。

:hover     表示，用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。

:active     表示，用户用鼠标点击这个链接，但是不松手，此刻的样式。 是英语“激活”的意思。

记住，这四种状态，在css中，必须按照固定的顺序写：

a:link、a:visited 、a:hover 、a:active

如果不按照顺序，那么将失效。“爱恨准则”love hate。必须先爱，后恨。

1          .nav ul li a{

2                               display: block;

3                               width: 120px;

4                               height: 40px;

5                        }

6                        .nav ul li a:link,.nav ul li a:visited{

7                               text-decoration: none;

8                               background-color: yellowgreen;

9                               color:white;

10                     }

11                     .nav ul li a:hover{

12                            background-color:purple;

13                            font-weight:bold;

14                            color:yellow;

              }

最标准的，就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中，发现不写link、visited浏览器也挺兼容。所以这些“老油条”们，就把a标签简化了：

a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态。

1          .nav ul li a{

2                               display: block;

3                               width: 120px;

4                               height: 50px;

5                               text-decoration: none;

6                               background-color: purple;

7                               color:white;

8                        }

9                        .nav ul li a:hover{

10                            background-color:orange;

              }