伪类
伪类表示选择器的状态,如:hover、:active、:last-child等。它们以一个冒号(:)开头。
CSS伪类的语法如下 –
:pseudo-class{ attribute: /*value*/}
伪元素
同样,伪元素用于选择虚拟元素,如::after、::before、::first-line等。
这些以双冒号(::)开头。
CSS伪元素的语法如下 –
立即学习“前端免费学习笔记(深入)”;
::pseudo-element{ attribute: /*value*/}
示例
以下示例说明了 CSS 伪类和伪元素属性。
现场演示
a:hover{ padding: 3%; font-size:1.4em; color: tomato; background: bisque;}You're somebody else
Dummy link 1Dummy link 2
输出
这将产生以下结果 –

示例
现场演示
p::after { content: " BOOM!"; background: hotpink;}p:last-child { font-size: 1.4em; color: red;}Anymore Snare?
Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.
Hit
Pop
输出
这将产生以下结果 –

以上就是CSS中伪类和伪元素的区别的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1625361.html
微信扫一扫
支付宝扫一扫