四十、CSS3的新特性(中)

一、CSS3的新特性

1.1、伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

  • 和创建一个元素,但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的,所以我们称为
  • element::before{}
  • before和after必须有
  • before在父元素内容的前面创建元素,after在父元素内容的后面插入元素。
  • 和一样,权重为1。



    
    
    
    伪元素选择器before和after
    


    
四十、CSS3的新特性(中)_第1张图片
image.png

1.2 伪元素选择器使用场景1:伪元素字体图标

四十、CSS3的新特性(中)_第2张图片
image.png




    
    
    
    伪元素选择器使用场景-字体图标
    


    

1.3 伪元素选择器使用场景2:仿土豆网显示隐藏遮罩案例





    
    
    
    伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例
    



    

1.4、伪元素选择器使用场景3:仿元素清除浮动

  1. 额外标签法也称为隔墙法,是W3C推荐的做法。
  2. 父级添加overflow属性
四十、CSS3的新特性(中)_第3张图片
image.png

四十、CSS3的新特性(中)_第4张图片
image.png

四十、CSS3的新特性(中)_第5张图片
image.png

你可能感兴趣的:(四十、CSS3的新特性(中))