范仁义css3课程---37、伪类选择器
范仁义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>