范仁义css3课程---37、伪类选择器
一、总结
一句话总结：
伪类选择器中的伪类是一个概念上的类，不是我们定义的，是抽象的。如a:hover，选择a标签（元素选择器）中具有鼠标悬停类的所有元素
1、常见的伪类选择器有哪些？
比如:link、:visited、:hover、:active、:focus
2、在chrome里面如何查看状态的样式代码：比如 :hover?
在styles里面的:hov（force element state） 里面，如果我们想看:hover，我们就选中:hover
二、伪类选择器
博客对应课程的视频位置：37、伪类选择器
https://www.fanrenyi.com/video/10/79
伪类选择器：一个概念上的类，不是我们定义的，是抽象的。如a:hover，选择a标签（元素选择器）中具有鼠标悬停类的所有元素，这个类是抽象的，不是我们自己定义的
伪类选择器的本质是 交集选择器
伪类专门用来表示元素的一种的特殊的状态，
比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
伪类选择器：
1. link、hover、active、visited
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
浏览器是通过历史记录来判断一个链接是否访问过
p标签等其它标签上面也可以设置hover和active
:focus选择器用于选择具有焦点的元素。
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪类选择器</title> 6 <style> 7 a:link{ 8 background-color: red; 9 } 10 a:hover{ 11 color: #bbffaa; 12 } 13 a:active{ 14 background-color: #ffff22; 15 } 16 a:visited{ 17 background-color: #777777; 18 } 19 p:hover{ 20 color: #bbffaa; 21 } 22 p:active{ 23 background-color: #ffff22; 24 } 25 input:focus{ 26 background-color: #ffff22; 27 } 28 </style> 29 </head> 30 <body> 31 <!-- 32 伪类选择器 33 34 伪类选择器 一般是使用冒号（英文状态下的） 35 36 伪类选择器的一个实质 就是一个 交集选择器 37 38 在chrome里面如何查看状态的样式代码：比如 :hover 39 在styles里面的:hov（force element state） 里面，如果我们想看:hover，我们就选中:hover 40 41 就是访问过和没有访问过是根据浏览器的历史记录来看的 42 43 a:link：表示设置没有访问过的a标签的样式 44 a:hover：表示鼠标移动到a标签上面的时候的一个状态 45 a:active：表示鼠标点击a标签时候的样式 46 a:visited：表示设置访问过了的a标签的样式 47 48 :hover和:active也可以用在别的标签上面 49 50 51 --> 52 53 <a href="https://fanrenyi.com" target="_blank">https://fanrenyi.com</a> 54 <br> 55 <hr> 56 <a href="https://baidu.com" target="_blank">https://baidu.com</a> 57 <p>p标签</p> 58 <br> 59 <hr> 60 <input type="text"> 61 </body> 62 </html>