【CSS】伪类和伪元素

伪类

  1. :hover:悬停
  2. active:激活
  3. focus:获取焦点
  4. :link:未访问(链接)
  5. :checked:勾选(表单)
  6. first-child:第一个子元素
  7. nth-child():指定索引的子元素(even偶odd奇)

伪元素

  1. ::before:创建虚拟元素(前)
  2. ::after:创建虚拟元素(后)
  3. ::selection:选中文本
css 复制代码
li:hover:last-child {
    cursor: pointer;
    color: royalblue;
}

li:hover:last-child::after {
    content: '我出来啦~';
    margin-left: 20px;
}

伪元素不支持链式写法:li::before::after{}0

动态伪类要按照lvha的顺序去写,否则因为优先级问题会出错。

动态伪类 :link不显示的原因:原因就是你已经打开你的网页,点击你的链接(打开过一次了),之后就是再怎么刷新,甚至关掉软件都是行不通的,只有修改一下链接地址才可以。

相关推荐
万少3 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站5 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名8 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫8 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊8 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter8 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折8 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_9 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
不会敲代码19 小时前
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比
css·vue.js·react.js
Angelial9 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js