零基础教你学前端——58、CSS伪类选择器

我们经常会看到页面中有一些特殊的动态样式，例如，点击文本的时候，文本颜色发生变化，鼠标悬停在文本区域的时候，文本区域背景颜色发生了改变，这样的效果该如何实现呢？（案例参照：新闻类型的网站）

网站中的标签及文本，默认没有任何的动态效果，如果想要添加这样动态样式，则需要配合鼠标的各种行为去完成，比如：鼠标点击，鼠标划过等；这些行为都可以使用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...