由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
CSS伪类，是一种特殊的类，它针对到CSS选择器起作用，使选中的标签或元素产生特定的效果。
CSS伪类的语法就是： 选择器 : 伪类名 { 属性 : 属性值 }
用的最多的伪类就是超链接a的伪类，链接是网站的重要组成部分，几乎在每个网页上都能看到不少的链接，合理的设计链接的样式能够给网页的颜值加分。链接有四种不同的状态，分别是 link、visited、active 和 hover，可以通过以下伪类选择器来为链接的四种状态设置不同的样式：
:link：定义未访问链接的样式；
:visited：定义已经访问过链接的样式；
:hover：定义当鼠标经过或悬停在链接上时的样式；
:active：定义点击链接时的样式。
举例：
<html><head></head><body><a>没有href的a标签,字体没有修饰，鼠标放上去也没反应</a></br><ahref=#target=_blank>href为#的a标签，默认蓝色，带下划线，鼠标放上去变成手</a></br><ahref=https://www.dotcpp.com/target=_blank>href为网址的a标签，效果同上</a></body></html>
运行结果：
（1）:link
说明：设置a对象在未被访问前的样式表属性。
举例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc;color:black;}</style></head><body><ahref=''>第一个链接</a><ahref=''>第二个链接</a></body></html>运行结果：
（2）:visited
说明：设置a对象在其链接地址已被访问过时的样式表属性。
举例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc;color:black;}a:visited{background:#FFFF99;border:1pxsoildred;color:red;}</style></head><body><ahref=''>第一个链接</a><ahref=''>第二个链接</a></body></html>运行结果：
（3）:hover
说明：设置对象在其鼠标悬停时的样式表属性。
举例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc;color:black;}a:visited{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}</style></head><body><ahref=''>第一个链接</a><ahref=''>第二个链接</a></body></html>运行结果：
（4）:active
说明：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
举例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc;color:black;}a:visited{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}a:active{background:#000;border:1pxsolidblack;color:white;}</style></head><body><ahref=''>第一个链接</a><ahref=''>第二个链接</a></body></html>运行结果：
定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确的顺序：a:link、a:visited、a:hover、a:active。