四十、CSS3的新特性(中)

时间:2021-6-4 作者:qvyue

一、CSS3的新特性

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

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

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

color{red}{注意:}

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



    


伪元素选择器before和after

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            /* display: inline-block; */
            content: '我';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        }
        div::after {
            content: '小猪佩奇';
        }
    
四十、CSS3的新特性(中)
image.png

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

四十、CSS3的新特性(中)
image.png




    


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

        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?1lv3na') format('truetype'),
                url('fonts/icomoon.woff?1lv3na') format('woff'),
                url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: 'e91e';
            color: red;
            font-size: 18px;
        }
    

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





    


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

        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了 土豆这个盒子,就让里面before遮罩层显示出来 */
        .tudou:hover::before {
            /* 而是显示元素 */
            display: block;
        }
    
四十、CSS3的新特性(中)
四十、CSS3的新特性(中)
四十、CSS3的新特性(中)
四十、CSS3的新特性(中)

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

  1. 额外标签法也称为隔墙法,是W3C推荐的做法。
  2. 父级添加overflow属性
  3. color{red}{父级添加after伪元素}
  4. color{red}{父级添加双伪元素}
四十、CSS3的新特性(中)
image.png

四十、CSS3的新特性(中)
image.png

四十、CSS3的新特性(中)
image.png
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。