【a】标签的伪类选择器

今天我们来学习一下a标签的4个伪类选择器:

①a:link选择器:修改从未被访问过的a标签样式。

②a:visited选择器:修改已经被访问过的a标签样式。

③a:active选择器:修改链接被长按时的样式。

④a:hover选择器:修改鼠标悬停在a标签上的样式。


举个栗子:




    
    a标签伪类选择器
    


明天

你好
我们
在路上

大家可以粘贴代码试一试,很容易就能理解这些伪类选择器。


------------------------------------分割线----------------------------------

a标签为类选择器的注意点:

①a标签的伪类选择器如果一起出现,那么一定要按照一个严格的标准实现:

先编写未点击状态:link→再编写已点击状态:visited→再编写鼠标悬停状态:hover→最后编写长按状态:active

如果顺序被颠倒,那么可能会没有效果。

编写的顺序要遵守爱恨原则:l(link)o v(visited) e、h(hover) a(active) t e。 


②如果默认状态的样式和被访问过的样式一样,那么可以简写成a{color:...;}


---------------------------------分割线--------------------------------------


下面来做一个关于a标签伪类选择器的练习(制作一个导航条):




    
    a标签伪类选择器之导航条制作
    






大家可以复制粘贴一下代码自己看一下效果(但是一般情况下 导航条的制作是用ul li标签来做的。这里我们为了图个方便,就直接用a标签来做)。

最后再特别提醒一下!

一定要注意:如果a标签的四个伪类选择器全部都写上了,一定要根据爱恨原则的顺序进行陈列。


每天进步一点点










你可能感兴趣的:(有关CSS)