当前位置: 首页 > news >正文

【前端基础】9、CSS的动态伪类(hover、visited、hover、active、focus)【注:本文只有几个粗略说明】

一、什么是伪类

选择器的一种,用于选择处于特定状态的元素。
最常见的现象:鼠标放在某些文字上面,文字就会加上颜色。

鼠标没放上去之前:
在这里插入图片描述
鼠标放上去之后:
在这里插入图片描述

二、动态伪类

图片来源(链接文章也有其他伪类说明)
在这里插入图片描述
在这里插入图片描述

代码例子:

  1. link:链接未访问的状态
    在这里插入图片描述
  2. hover:鼠标放在链接上
    在这里插入图片描述
  3. active:链接被点下,但是鼠标没松开
    在这里插入图片描述
  4. visited:链接被访问过
    在这里插入图片描述
  5. 【补充说明】:focus:链接获取焦点的时候
    在这里插入图片描述
    在这里插入图片描述

注意:这几个伪类的使用一定要遵守编写顺序,即LVHA
在这里插入图片描述

三、其他说明

在这里插入图片描述
在这里插入图片描述

http://www.xdnf.cn/news/341281.html

相关文章:

  • 5月8日星期四今日早报简报微语报早读
  • 【人工智能核心技术全景解读】从机器学习到深度学习实战
  • 什么是多模态大模型?为什么需要多模态大模型?
  • 兼具直连存储与分布式存储优势的混合存储方案
  • 轻量级证件照制作 AI 工具 HivisionIDPhotos 介绍
  • Android 查看 Logcat (可纯手机方式 无需电脑)
  • ZooKeeper工作机制与应用场景
  • 中国自动驾驶研发解决方案,第一!
  • SM2Utils NoSuchMethodError: org.bouncycastle.math.ec.ECFieldElement$Fp.<init
  • 【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
  • 维吉尼亚密码C++实现
  • 责任链设计模式
  • 路由器断流排查终极指南:从Ping测试到Wireshark抓包5步定位法
  • Windows Server 2025 安装AMD显卡驱动
  • android.app.Fragment和androidx.fragment:fragment的区别
  • ActiveMQ 源码剖析:消息存储与通信协议实现(四)
  • 预训练模型实战手册:用BERT/GPT-2微调实现10倍效率提升,Hugging Face生态下的迁移学习全链路实践
  • 数据中台-数仓分层结构【Doris】
  • 【LunarVim】CMake LSP配置
  • 基于Kubernetes的Apache Pulsar云原生架构解析与集群部署指南(上)
  • python 上海新闻爬虫
  • Baumer工业相机堡盟工业相机的工业视觉中为什么偏爱“黑白相机”
  • 【前端基础】8、CSS的选择器
  • HTML10:iframe内联框架
  • AI时代企业应用系统架构的新思路与CIO变革指南
  • 如何使用极狐GitLab 软件包仓库功能托管 helm chart?
  • 【RAG技术全景解读】从原理到工业级应用实践
  • Redis 8.0正式发布,再次开源为哪般?
  • 基于STM32、HAL库的CP2102-GMR USB转UART收发器 驱动程序设计
  • keep the pipe Just full But no fuller - BBR 与尘封 40 年的求索