首页 > Web开发 > 详细

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

时间:2019-11-15 00:53:59      阅读:98      评论:0      收藏:0      [点我收藏+]

一、伪元素选择器

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>

 

技术分享图片

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

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>

?

技术分享图片

三、源码:

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-伪元素选择器、清除浮动方式五

原文:https://www.cnblogs.com/ruigege0000/p/11863694.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!