笔记整理--a标签常用的动态伪类

1.a标签常见的动态伪类有以下4个：

• a:link 未访问的链接
• a:visited 已访问的链接
• a:hover 鼠标挪动到链接上
• a:active 激活的链接（鼠标在链接上长按住未松开）

使用要注意：

• :hover必须放在:link和:visited后面才能完全生效
• :active必须放在:hover后面才能完全生效
• 因此建议的编写顺序是 :link、:visited、:hover、:active

伪类代码：

<style>
         /* 未访问时的状态 */
        a:link{
            color:#999;
        }
        /* 已访问过的状态 */
        a:visited{
            color: crimson;
        }
        /* 鼠标停留时的状态 */
        a:hover{
            color: blue;
        }
        /* 激活的链接（鼠标在链接上长按住未松开 */
        a:active{
            font-size: 48px; 
        }
</style>        

测试效果：

(1) a:link的效果->未访问的链接，如果已经点击该链接了，要清除浏览器的缓存才能看到，否则看到的是a:visited的效果

(2) a:visited的效果->已访问的链接

(3) a:hover的效果->鼠标停留在链接上

(4) a:active的效果->鼠标在链接上长按住未松开

2.补充：

（1）除了a元素，:hover、:active也能用在其他元素上，如strong元素等

（2）:focus指当前拥有输入焦点的元素,a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
如：显示的轮廓即为a元素:focusd伪类的效果

有两种去除a:focus效果的方法：

/*1.在:focus中使用outline去除，虽然效果没有了，但也可以处于选中状态*/
a:focus{
            /* outline：（轮廓）是绘制于元素周围的一条线 */
             outline: none; 
        }


/*2.使用a元素带的tabindex属性，当 tabindex="-1"为不可选中*/
<a tabindex="-1" href="#">动态伪类1</a>