伪元素和伪类
2021/6/13 10:21:04
本文主要是介绍伪元素和伪类,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
伪元素和伪类的根本区别:是否创造了新的元素。
伪元素/伪对象选择器:
伪元素可以当作一个假的元素,但不存在于dom树中,通常用来向元素添加小图标、清除浮动等
伪元素 | 作用 |
---|---|
:first-letter | 将特殊的样式添加到文本的首字母 |
:first-line | 将特殊的样式添加到文本的首行 |
:before | 在某元素之前插入某些内容 |
:after | 在某元素之后插入某些内容 |
伪类选择器
伪类需要手动触发,触发时修改元素样式达到一个特殊的动态效果。
伪类 | 作用 |
---|---|
:active | 将样式添加到激活的元素 |
:focus | 将样式添加到被选中的元素 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式 |
:link | 将特殊的样式添加到未被访问的链接 |
:visited | 将特殊的样式添加到被访问的链接 |
:first-child | 将特殊的样式添加到元素的第一个子元素 |
:lang | 允许创作者来定义指定的元素中使用的语言 |
区别
使用伪类:first-child和伪元素:first-letter来比较
<!DOCTYPE html> <html> <head> <title>伪类/伪元素</title> <style> span:first-child { color: green; } .first-letter:first-letter { color: blue; } .first-letter1 { color: blue; } </style> </head> <body> <div> <span>I am lijy1</span> <span>I am lijy2</span> </div> <div class="first-letter"> <span>I am lijy</span> </div> <div> <span class="first-letter1">I</span><span> am lijy</span> </div> </body> </html>
输出结果
:first-child 添加样式到第一个子元素
:first-letter 添加样式到第一个字母
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果需要通过添加一个实际的元素才能达到,
实际上:css3中,明确规定了用一个冒号表示伪类,用两个冒号表示伪元素。
但因为兼容性问题,大部分还是统一使用单冒号。
附加:帮助记忆a标签的伪类的使用顺序
LOVE / HATE
link
visited
hover
active
这篇关于伪元素和伪类的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求