【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 分钟前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D10 分钟前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠18 分钟前
AJAX的学习
前端·学习·ajax
JNU freshman24 分钟前
vue 技巧与易错
前端·javascript·vue.js
落一落,掉一掉32 分钟前
第十二周 waf绕过和前端加密绕过
前端
Asort32 分钟前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee41 分钟前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
我是日安41 分钟前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼43 分钟前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript
LRH43 分钟前
时间切片 + 双工作循环 + 优先级模型:React 的并发任务管理策略
前端·react.js