编程技术文章分享与教程

网站首页 > 技术文章 正文

32、::before 和::after 中双单冒号有什么区别、作用?(必会)

hmc789 2024-11-14 16:33:06 技术文章 2 ℃

区别

在 CSS 中伪类一直用 : 表示,如 :hover,:active 等

伪元素在 CSS1 中已存在,当时语法是用 :表示,如 :before 和 :after

后来在 CSS3 中修订,伪元素用 :: 表示,如 ::before 和 ::after,以此区分伪元素和伪类

由于低版本 IE 对双冒号不兼容,开发者为了兼容性各浏览器,继续使使用 :after 这种老语法表示伪元素

单冒号(:)用于 CSS3 的伪类

双冒号(::)用于 CSS3 的伪元素

想让插入的内容出现在其它内容前,使用::before,否则,使用::after;

在代码顺序上,::after 生成的内容也比::before 生成的内容靠后

如果按堆栈视角,::after 生成的内容会在::before 生成的内容之上

作用:

::before 和::after 的主要作用是在元素内容前后加上指定内容

伪类与伪元素都是用于向选择器加特殊效果

伪类与伪元素的本质区别就是是否抽象创造了新元素

伪类只要不是互斥可以叠加使用

伪元素在一个选择器中只能出现一次,并且只能出现在末尾

伪类与伪元素优先级分别与类、标签优先级相同

Tags:

标签列表
最新留言