（14）css—伪类选择器_伪类选择器怎么写-CSDN博客

本文链接：https://blog.csdn.net/qq_36213140/article/details/121739804

一、伪类和普通类的区别

伪类和类之间有一定的相似之处，也存在明显的区别。普通的类：必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。比如说当我们访问后，鼠标悬停，鼠标点击后才加载样式，伪类选择器的权重与普通的类选择器相同。

伪类补充说明：添加在一个具体的已经有了的元素之上的，选中的是元素的某种状态，元素可能因为状态的改变，导致伪类选中的内容会动态发生变化。类似于偷偷地给元素添加了一个class的类，在DOM中并不会真的找到一个这样的类，所以叫伪类。伪类的权重与类选择器一样。

二、伪类选择器语法（写法）

前面是普通的选择器，后面紧跟:伪类名。

三、<a>的伪类选择器

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

四、<a> 标签的伪类书写顺序

<a> 标签上可能会同时触发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、鼠标移上hover、鼠标点击active。为了方便记忆，利用爱恨准则：love hate。

五、<a> 标签的伪类实际应用

一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状。

更加常用的一种设置方式如下：

<a> 标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的 <a> 默认显示样式的属性，包括盒模型、文字等。a:hover 伪类选择器：设置鼠标移上时不一样的样式属性。

<!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>css-伪类选择器</title>
    <style>
        a {
            display: block;
            width: 150px;
            height: 50px;
            background-color: skyblue;
            font: bold 20px/50px "微软雅黑";
            text-align: center;
            color: #fff;
            text-decoration: none;
        }
        a:hover {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">点击跳转到百度</a>
</body>
</html>