微信扫一扫打赏支持

范仁义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>

 

 

 

 

 

 

 

 
posted @ 2020-02-13 09:45  范仁义  阅读(241)  评论(0)  编辑  收藏  举报