欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML连载50-伪元素选择器、清除浮动方式五

程序员文章站 2022-11-08 11:09:49
一、伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素。 2.格式: 标签名称::before{ 属性名称:值; } 给指定标签的内容前面添加一个子元素 标签名称::after{ 属性名称:值; } 给指定标签的内容后面添 ......

一、伪元素选择器

1.什么是伪元素选择器

伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素。

2.格式:

 

标签名称::before{

    属性名称:值;

}

 

 

给指定标签的内容前面添加一个子元素

 

标签名称::after{

    属性名称:值;

}

 

 

给指定标签的内容后面添加一个子元素

我们举个例子:

 

 div{

            width:200px;

            height: 200px;

            background-color: red;

​

        }

        /*p{*/

            /*width: 50px;*/

            /*height: 50px;*/

            /*background-color: pink;*/

        /*}*/

        div::before{

            content:"你是好儿女";

            width:70px;

            height: 70px;

            background-color: blue;

            display:block;/*如果不加这个显示的方式,那么上面设置宽高就不会生效*/

        }

        div::after{

            content:"大家都很累";

            width: 80px;

            height: 80px;

            display: block;

            background-color: white;

           

        }

..............省略代码...........

<div>

    <!--<p>爱你</p>-->

    我是文字

    <!--<p>不爱你</p>-->

</div>

 

HTML连载50-伪元素选择器、清除浮动方式五

注意:指定添加的子元素中还可以添加一个属性

visibility:hidden;我们​这个伪元素中的内容就会隐藏起来。

二、清除浮动方式五

1.

 

        .box1{

            background-color: red;

            /*border:1px white solid;*/

        }

        .box2{

            background-color: green;

            /*border:1px white solid;*/

        }

        .box1 p{

            width:100px;

            background-color: blue;

        }

        .box2 p{

            width:100px;

            background-color: red;

        }

        p{

            float:left:

        }

        .box1::after{

            content:"";/*设置子元素为空*/

            display:block;

            height: 0;/*不占用空间*/

            visibility: hidden;

            clear:both;/*这个很重要*/

        }

    </style>

</head>

<body>

<div class="box1">

    <p>我是文字1</p>

    <p>我是文字2</p>

    <p>我是文字3</p>

</div>

<div class="box2">

    <p>我是文字4</p>

    <p>我是文字5</p>

    <p>我是文字6</p>

</div>

​

HTML连载50-伪元素选择器、清除浮动方式五

三、源码:

d136_pseudoelementselector.htmld137_clearfloatfive.html

地址:

https://github.com/ruigege66/html_learning/blob/master/d136_pseudoelementselector.html

https://github.com/ruigege66/html_learning/blob/master/d137_clearfloatfive.html

2.csdn:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)

3.博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取java大数据学习视频礼包

 HTML连载50-伪元素选择器、清除浮动方式五