【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不显示的原因:原因就是你已经打开你的网页,点击你的链接(打开过一次了),之后就是再怎么刷新,甚至关掉软件都是行不通的,只有修改一下链接地址才可以。

相关推荐
qq_316837754 小时前
uni.chooseMedia 读取base64 或 二进制
开发语言·前端·javascript
Zoey的笔记本4 小时前
2026告别僵化工作流:支持自定义字段的看板工具选型与部署指南
大数据·前端·数据库
小二·4 小时前
Python Web 开发进阶实战:混沌工程初探 —— 主动注入故障,构建高韧性系统
开发语言·前端·python
gis开发4 小时前
【无标题】
java·前端·javascript
小二·4 小时前
Python Web 开发进阶实战:低代码平台集成 —— 可视化表单构建器 + 工作流引擎实战
前端·python·低代码
慧一居士5 小时前
Vite 中配置环境变量方法及完整示例
前端·vue.js
梦因you而美5 小时前
XPath 元素定位全方位技术文档
javascript·xpath·xpath定位
天意pt5 小时前
Idempotency 幂等性 - 点赞和投票功能
前端·javascript·express
weixin_427771616 小时前
cursor 智能commit
前端
努力的小陈^O^6 小时前
问题:Spring循环依赖问题排查与解决
java·开发语言·前端