共计 1871 个字符，预计需要花费 5 分钟才能阅读完成。
咱们常常会看到页面中有一些非凡的动静款式，例如，点击文本的时候，文本色彩发生变化，鼠标悬停在文本区域的时候，文本区域背景色彩产生了扭转，这样的成果该如何实现呢？（案例参照：新闻类型的网站）
网站中的标签及文本，默认没有任何的动态效果，如果想要增加这样动静款式，则须要配合鼠标的各种行为去实现，比方：鼠标点击，鼠标划过等；这些行为都能够应用 CSS 中的伪类选择器来实现。
伪类选择器，属于类选择器中的一种，他是依据特定状态选取元素。根本语法为：selector 冒号前面跟上鼠标行为；在这里 selector 为其余选择器；冒号及鼠标行为就是罕用的伪类选择器。（selector:link; selector:visited; selector:hover; selector:active 能够展现一下代码的格局）
a:link{
color:red
}
a:visited{
color:red
}
罕用的伪类选择器有四个
第一个：鼠标点击前，应用冒号和 link 连贯 (:link)；代表：鼠标没有操作元素时，元素的默认款式.
第二个：鼠标点击后，应用冒号和 visited 连贯 (:visited)；代表：鼠标点击并来到元素之后的款式
第三个：鼠标悬停时，应用冒号和 hover 连贯 (:hover)；代表：鼠标悬停或者是划过元素时元素的款式
第四个：鼠标点击时，应用冒号和 active 连贯 (:active)；代表：鼠标点击元素霎时，元素显示的款式.
在这里须要留神的是：1，冒号和前面的鼠标行为，没有任何空格，必须连贯在一起；2，四个伪类选择器必须依照以上介绍的程序书写（:link,:visited,:hover,:active）, 否则在浏览器中局部款式不能实现；3，如果想要将伪类选择器一起应用，只能利用在超链接 a 元素下面，因为，其余标签不能实现鼠标拜访前，和鼠标拜访后的两种款式润饰.
在 004 目录下，创立一个 pseudo_class_selector.html 文件，构建根本代码，在 body 外面增加一个 a 标签，并且为 href 属性增加一个“#”，设置为空的链接地址；a 标签外部增加文本：“王者英雄最强出装”。
在浏览器里预览页面，一个自带下划线，并且文本色彩为蓝色的超链接曾经显示加载实现。
返回代码，应用伪类选择器对 a 标签进行润饰；在 head 标签外面增加 style 标签，应用：a 冒号 link(a:link{}) 申明超链接拜访前的款式：color red; 在浏览器中查看成果，默认文本色彩蓝色超链接文本变成了红色；
再次返回代码，持续润饰 a 标签，应用 a 冒号 visited（a:visited{}）申明超链接拜访后的款式 color green，此时浏览器中没有任何的成果显示，因为浏览器中的超链接还未进行点击；
持续润饰 a 标签，应用 a 冒号 hover（a:hover{}）申明超链接鼠标悬停的款式：color yellow，此时浏览器中鼠标划过 a 标签的时候，a 标签的文本变成了黄色。
持续返回代码，持续润饰 a 标签，应用 a 冒号 active（a:active{}），申明超链接鼠标点击的款式：color skyblue。
超链接的润饰曾经增加结束，回到浏览器，咱们一起来查看成果：超链接文本点击前默认蓝色变为红色款式曾经实现，当鼠标在超链接文本移入移出之时，文本色彩，由红色变成绿色成果也曾经实现；当鼠标在超链接上点击的那一瞬间，能够看到超链接文本变成天蓝色曾经实现；点击过后，鼠标移出文本，超链接的文本色彩变成了绿色。
在这里须要留神的是，伪类选择器也能够利用在其余元素上，然而只能实现 active 激活霎时和 hover 鼠标悬停成果;
在 a 标签的完结地位处回车，增加一个 div 标签，并且增加文本：“我是一个一般的 div 标签”，style 标签中，应用元素选择器找到 div 进行润饰;（须要略微进展两秒间接演示代码敲出即可:div{width:200px;height:200px;backgound-color:skyblue}）
持续为 div 增加款式，鼠标划过时批改 div 背景色为红色，div:hover，background-color:red ;（div:hover{background-color:red}）
再来增加一个款式，鼠标点击 div 时, 批改 div 的宽度高度：(div:active{width:100px;height:100px})
回到浏览器外面，鼠标划过背景色变为红色成果实现了，并且点击的时候，div 的大小也产生了扭转；
文章配套视频链接：https://www.bilibili.com/vide…