CSS核心样式-a标签的四个伪类

伪类和类之间有一定的相似之处也存在明显的区别

普通的类：必须给标签设置对应的class属性值才能选中标签，而且类选择器后面添加的属性会立即加在浏览器之上
伪类：不需要给标签添加任何属性，伪类名都是语法提前设定好的，书写伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载

<a>标签可以根据用户行为不同划分为四种状态，通过<a>标签的伪类可以将四种状态选中设置为了不同的样式效果，用户触发对应行为就可以加载对应的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四个伪类</title>
    <style>
        a:link {
            /* 访问前状态 */
            color: black;
        }        
        a:visited {
            /* 访问后状态 */
            color: black;
        }
        a:hover {
            /* 鼠标悬浮状态 */
            color: blueviolet;
        }
        a:active {
            /* 鼠标点击状态 */
            color: brown;
        }
    </style>
</head>
<body>
    
</body>
</html>

<a>标签上可能会同时触发2到3个状态，每个状态的属性都会进行加载,相同的属性之间会发生层叠
伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要
要想让每个伪类的状态正常加载，书写顺序必须是 : 访问前link 访问后visited、鼠标移上hover、鼠标点击active

为了方便记忆伪类书写顺序：利用爱恨准则: love hate

一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态
更加常用的一种设置方式如下：

<a>标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的<a>，默认显示样式属性包括核模型、文字等

a:hover 伪类选择器比较常用：设置鼠标移上时不一样的样式属性

目录：

编辑于 2022-07-12 19:40

前端入门

CSS

CSS核心样式-a标签的四个伪类

文章被以下专栏收录

前端学习笔记专栏