CSS之伪类和伪元素 | :before和::before

例子:

&  表示嵌套的上一级。如 &:hover 相当于 上一级元素:hover

:hover 伪类

:before 伪元素,在元素之前加入某内容(一定要写 content )

display:none; 隐藏对象。display隐藏元素后,不占原先位置。

伪元素的 宿主元素的position要设置为relative或absolute,否则布局可能会乱掉。


 伪类和伪元素

伪类 ,虚拟类名

 

伪元素,虚拟元素,类似DOM结构

:before是其中的一个伪元素。

 :before和::before的作用一样

创建 :before :after 元素时,必须要设置content属性,否则不存在,宿主元素的position要设置为relative或absolute,否则布局可能会乱掉

:before / :after 在元素之前/后插入某内容

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

: 单冒号 是 CSS2 正确且正常的写法

:: 双冒号 是CSS3 新写法且兼容性写法(兼容CSS2)

对于CSS2之前已有的伪元素,单冒号和双冒号作用一样,如:before::before作用一样。另外,由于兼容性(兼容IE浏览器),用CSS2的单冒号写法较为安全


其他相关知识点

复合选择器

伪元素选择器

选择器的权重关系

 CSS3新增的选择器:属性/结构伪类/伪元素

元素的显示与隐藏

display:none 隐藏对象,不占有原先位置

清除浮动

伪元素选择器 写法参考

 

参考:彻底搞懂 CSS 伪类和伪元素 - 掘金 (juejin.cn)

伪元素到底是一个还是两个冒号?_伪元素单冒号和双冒号-CSDN博客

html - 详解 CSS 属性 - 伪类和伪元素的区别 - StephenLi - SegmentFault 思否

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值