HTML连载50-伪元素选择器、清除浮动方式五 - 心悦君兮君不知-睿

来源：cnblogs　　作者：心悦君兮君不知-睿　　时间：2019/11/15 8:43:20　　对本文有异议

一、伪元素选择器

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