伪类选择器

最新推荐文章于 2024-04-14 14:25:59 发布
最新推荐文章于 2024-04-14 14:25:59 发布
阅读量5.6k 收藏 10
点赞数 2
分类专栏： html 文章标签： css  鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44793200/article/details/89634033
版权

特点：

在任何选择器后，添加 伪类选择器可以设置鼠标悬停在该元素上时，该元素展现的样式。

需要标签：

a标签

浏览器会给a标签默认添加一些样式

a标签有4种状态：

（1）a:link（未访问过的链接）

  （2）  a:hover（鼠标经过，也就是鼠标指针放在该元素上时）

   （3）a:active（当前激活链接,也就是点击鼠标左键时）

   （4）a:visited（已访问过）

 

 

 

 

 

 

 

 

伪类选择器：

1.hover

hover是一种状态，表示当鼠标放在元素上的时候，当鼠标悬浮在标签上时的样式

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             /*当鼠标悬浮在a标签上时的样式*/
  8.             a:hover{
  9.                 color: blue;
  10. }
  11.         </style>
  12.         </head>
  13.     <body>
  14.         <li><a href="https://www.baidu.com">百度</a></li>
  15.     </body>
  16. </html>

a:hover{

         color:blue;

}

表示，当鼠标放在页面中的a标签上时，标签内文字的颜色将变为蓝色

2active

当鼠标按下a标签没有松手的时候的样式

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             /*当鼠标按下a标签没有松手的时候的样式*/
  8.             a:active{
  9.                 color: green;
  10.             }
  11.         </style>
  12.         </head>
  13.     <body>
  14.         <li><a href="https://www.sina.com.cn">新浪</a></li>
  15.     </body>
  16. </html>

a:active{
                color: green;
            }

表示，当鼠标放在页面中的a标签上时，标签内文字的颜色将变为绿色

:3visited

  1. 当a标签的目标页面被访问过的时候的样式
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title></title>
  7.         <style type="text/css">
  8.         /*当a标签的目标页面被访问过的时候的样式*/
  9.             a:visited{
  10.                 color: red;
  11.             }
  12.         </style>
  13.         </head>
  14.     <body>
  15.         <li><a href="https://ai.taobao.com/">淘宝</a></li>
  16.     </body>
  17. </html>

            a:visited{
                color: red;
            }

表示，当鼠标放在页面中的a标签上时，标签内文字的颜色将变为红色

4 cursor

表示鼠标放在在元素上时，指针的样式

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.         /*当a标签的目标页面被访问过的时候的样式*/
  8.             a:cursor{
  9.                 pointer
  10.             }
  11.         </style>
  12.         </head>
  13.     <body>
  14.         <li><a href="https://www.qq.com/">腾讯</a></li>
  15.     </body>
  16. </html>

鼠标放在该元素上，会展示出一个小手

weixin_44793200
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
结构伪类选择器（总结）
12-22
什么是结构伪类选择器？ 结构伪类选择器是针对HTML的结构进行分类的选择器，特征就是位置 分为三大类 一类 e:first-child e:last-child e:only-child e:nth-child(n/even/odd)隔行换色，列表换色 e:nth-last-child ...
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
[CSS]伪类选择器
热门推荐
luckyboy!的博客
08-21 2万+
伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。
CSS基础之伪类选择器（如果想知道CSS的伪类选择器知识点，那么只看这一篇就足够了！）
最新发布
秋刀鱼不做梦的编程日常
04-14 1532
CSS基础之伪类选择器（如果想知道CSS的伪类选择器知识点，那么只看这一篇就足够了！）
CSS伪类选择器详细讲解
weixin_67979623的博客
11-02 1万+
说起CSS3选择器种类之多，今天我们来学习下CSS3中重中之重的选择器伪类选择器，这篇涵盖了很多知识点，你看完这篇保证能对它有个更深的了解
CSS常用伪类选择器详解
qq_43293207的博客
03-24 9605
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
CSS - 常用的伪类选择器简单介绍与基本使用
都随它大小便吧
02-28 4947
CSS 伪类选择器用于选择元素的特定状态或位置，以便对其应用样式。以下是一些常见的伪类选择器及其作用。
css3 伪元素和伪类选择器详解
09-25
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
11-21
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
四种css 伪类选择器
12-13
X:after  Example Source Code ：.clearfix:after {content: “”;...:after伪类与content结合使用，用于往元素类追加内容。:after伪类还有个妙用：用于产生阴影，点击这里查看。X:hover  Example S
【从零开始学CSS | 第二篇】伪类选择器
fckbb的博客
07-13 2718
上一篇文章我们详细的为大家介绍了一些常见的选择器，这几篇我们将再次介绍CSS中的一个常见选择器——伪类选择器，他的种类繁多，希望各位可以对它有一个比较好的掌握程度。
css 伪类选择器
weixin_43294560的博客
11-17 1787
css 伪类选择器。
CSS 选择器分栏——伪元素与伪类选择器
浅陌繁星的博客
11-29 1422
伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。。伪元素是一个附加在选择器末的关键词，允许你对被选择元素的特定部分修改样式。
CSS选择器（类选择器）
D3312366995的博客
06-01 1万+
CSS基础选择器：类选择器
附录12-伪类选择器
potato123232的博客
09-08 1602
伪类就是内容的状态，比如这个在我鼠标没放上去的时候，它是这样的放上去之后它变色了这个用的就是伪类选择器伪类选择器包含很多，我们这里先讲链接伪类选择器，伪类选择器用冒号表示，冒号后接伪状态伪类选择器都是可以不加前面元素的，一般是当子元素的某些条件用的，我们会在下面的反选中做一个例子。
【CSS 知识总结】第四篇 - CSS 选择器-伪类和伪元素
BraveWangDev
03-20 2145
CSS 的三大特征；CSS 选择器的优先级；CSS 优先级的计算规则；CSS 选择器的权重；CSS 选择器面试题；本篇，介绍 CSS 选择器：伪类和伪元素；伪类用于定义元素的特殊状态；同一元素，根据不同状态，显示不同样式，样式随状态（用户行为）变化而变化；与普通 CSS 类相比较，伪类选择器只有处于 dom 树无法描述的状态下，才能为元素添加样式；所以被称作伪类；CSS 伪元素用于设置元素指定部分的样式；；
伪类选择器的简单介绍
weixin_45824120的博客
11-24 3201
一、伪类选择器介绍 伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。 伪类的功能和一般的DOM中的元素样式相似，但和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。 二、伪类选择器的分类 伪类选...
nth-child的坑 - 不管元素的类型
l13640698113的博客
10-09 565
nth-child的坑 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素. :nth-child(n) / nth-last-child选择器匹配属于其父元素的第 n 个子元素 / 倒数开始数第n个元素，不论元素的类型。 <style> li:nth-last-child(2) { color: red; } li:nth-of-type(2) { colo
html伪类选择器代码
11-13
1. :hover 伪类选择器用于鼠标悬停在元素上时的样式变化： ```css a:hover { color: red; } ``` 2. :active 伪类选择器用于元素被激活（例如被点击）时的样式变化： ```css button:active { background-color: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值