伪类和伪元素
2022/3/4 23:45:19
本文主要是介绍伪类和伪元素,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
伪类
用于已有元素 处于某种状态时 为其添加对应的样式。
这个状态时根据用户行为而动态变化的。
举例:
:hover :鼠标悬浮时样式
h1:hover{ color: #42b983; }
伪元素
用于创建一些不在DOM树中的元素,并为其添加样式。
注意:虽然在页面上可以看的见对应的元素,但实际上用伪元素创建的元素时不存在与DOM树中的。
举例:
在每个h1元素中的开头添加一个“@”,结尾都添加一个“#”,并指定颜色:
h1::before { content: '@'; color: #4283b9; } h1::after { content: '#'; color: #4283b9; }
伪元素与伪类的区别
- 伪元素使用的是“ :: ”,伪类使用的是“ : ”
- 伪元素不允许拼接使用,伪类可以拼接多个使用(需要各个伪类不冲突的情况下)
//可以 h2:hover:first-child{ //... } //不可以 h2::before::after{ //... }
- 伪元素只能在伪类的最后面,伪类则可以为与伪元素前面或者后面
//可以 h2:hover:first-child::before{ //... } //不可以 h2::before:hover{ //... }
- 伪元素是创建一个不存在于DOM树的元素并且可以对其进行操作,伪类是基于DOM来创建不同状态(修饰元素)
这篇关于伪类和伪元素的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-0601-电商商品中心解密:仅凭SKU真的足够吗?
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能