CSS——超级链接 伪类

超级链接就是a标签。

2.1 伪类

也就是说，同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。

类就是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。

伪类用冒号来表示。

a标签有4种伪类，要求背诵：

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; 12  }

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

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

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

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

 

a:link

a:visited

a:hover

a:active

 

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

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

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

 

2.2 超级链接的美化

a标签在使用的时候，非常的难。因为不仅仅要控制a这个盒子，也要控制它的伪类。

我们一定要将a标签写在前面，:link、:visited、:hover、:active这些伪类写在后面。

a标签中，描述盒子； 伪类中描述文字的样式、背景。

 

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; 15  }

 

记住，所有的a不继承text、font这些东西。因为a自己有一个伪类的权重。

 

最标准的，就是把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; 11  }