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

相关推荐
庙堂龙吟奈我何1 小时前
js中哪些数据在栈上,哪些数据在堆上?
开发语言·javascript·ecmascript
二川bro1 小时前
第30节:大规模地形渲染与LOD技术
前端·threejs
景早1 小时前
商品案例-组件封装(vue)
前端·javascript·vue.js
不说别的就是很菜1 小时前
【前端面试】Vue篇
前端·vue.js·面试
IT_陈寒1 小时前
Java 17实战:我从老旧Spring项目迁移中总结的7个关键避坑点
前端·人工智能·后端
倚肆2 小时前
CSS 动画与变换属性详解
前端·css
blackorbird2 小时前
谷歌 Chrome 浏览器的指纹识别技术,一边反追踪一边搞追踪
前端·chrome
Mintopia2 小时前
🚀 共绩算力:3分钟拥有自己的图像优化服务-CodeFormer:先进的图像算法优化、修复马赛克、提升图片清晰度等
前端·人工智能·ai编程