首页 > > 网页制作 > css >

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

2019-11-15 16:01:29来源：博客园阅读 ()

一、伪元素选择器

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;我们?这个伪元素中的内容就会隐藏起来。

二、清除浮动方式五

        .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>

?