一、伪类和普通类的区别

伪类和类之间有一定的相似之处，也存在明显的区别。普通的类：必须给标签设置对应的 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>

注意：其他标签也可以设置 :hover 伪类状态。

（14）css—伪类选择器相关推荐

CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
css伪类选择器，:link、:visited、:focus、:hover、:active、:first-child
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪类选择器伪类选择器用于表达在某种状态下的元素. 包括:link.:visited.:focus.:hover.:active ...
CSS 伪类选择器详解：为网页添加交互与美感
介绍 CSS 伪类选择器是一种非常有用的 CSS 选择器,它能够根据元素的状态.位置或其他属性来选择元素并应用样式.伪类选择器的语法为 :pseudo-class,其中 pseudo-class 是一 ...
CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法 web开发中,经常有对列表的3倍数列表项单独设置样式的需求. ul li:nth-child(3n+3) { colo ...
html引入scss,使用Sass混合宏来声明CSS伪类选择器
CSS3在选择器方面添加伪类选择器这方面的特性,比如:nth-child(n).:nth-of-type(n)这样的选择器,其好处在这里就不多说了.如果你对这方面感兴趣的话,你可以阅读早前整理有关于C ...
用CSS伪类选择器做一个爱心
用CSS伪类选择器做一个爱心这里我们会用到 position:relative:相对定位 position:absolute;绝对定位 border-radius:圆角属性 transform:变换 ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）
css 伪类选择器(链接伪类选择器.结构伪类选择器.目标伪类选择器) 链接伪类选择器:顾名思义就是用于链接的伪类选择器.a的伪类标签有:a:link.a:visited.a:hover.a:activ ...
php中的伪类选择器,css伪类选择器介绍
伪类选择器: (推荐学习:css快速入门) 1.link.hover.active.visited a:link(未访问的链接状态),用于定义了常规的链接状态. a:hover(鼠标放在链接上的状态) ...

（14）css—伪类选择器