HTML連載50-僞元素選擇器、清除浮動方式五

時間 2019-11-16

原文原文鏈接

1、僞元素選擇器html

1.什麼是僞元素選擇器git

僞元素選擇器做用給指定標籤的內容前面添加一個子元素，或者給指定標籤的內容後面添加一個子元素。github

2.格式：微信

標籤名稱::before{

    屬性名稱：值；

}

給指定標籤的內容前面添加一個子元素學習

標籤名稱::after{

    屬性名稱:值；

}

給指定標籤的內容後面添加一個子元素大數據

咱們舉個例子：ui

 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>

注意：指定添加的子元素中還能夠添加一個屬性spa

visibility:hidden;咱們這個僞元素中的內容就會隱藏起來。.net

2、清除浮動方式五code

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