HTML serial pseudo-element selector 50, remove five floating manner

A pseudo-element selector

1. What is the pseudo-element selector

Pseudo-element acting to select the contents of the specified label in front of a child element, or to add the contents of a specified label child element behind.

2. Format:

:: before {tag name 

    attribute name: value; 

}

To the front of the contents of the specified label to a child element

:: after {tag name 

    attribute name: value; 

}

Back to the contents of the specified label to a child element

We give an example:

{div 

            width: 200px; 

            height: 200px; 

            background-Color: Red; 
        } 
        / {P * * / 
            / * width: 50px; * / 
            / * height: 50px; * / 
            / * background-Color: Pink; * / 
        / *} * / 
        div {the before :: 
            Content: "you are good children"; 
            width: 70px; 
            height: 70px; 
            background-Color: Blue; 
            Run the display: Block; / * if not shown in this way, then the above settings wide another job will not take effect * / 
        } 
        div {:: the After 
            Content: "we are very tired"; 
            width: 80px; 
            height: 80px;



















            Run the display: Block; 

            background-Color: White; 

           

        } 

.............. omitted the code ........... 

< div > 

    <-! <the p-> Love </ the p-> -> 

    I am writing 

    <-! <the p-> does not love you </ the p-> -> 

</ div >

Note: Add the specified child elements can also add an attribute

visibility: hidden; what we in this pseudo-element will be hidden.

Second, clear the way five float

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

            the Clear: both-; / * this is very important * / 

        } 

    </ style > 

</ head > 

< body > 

< div class = "box1" > 

    < the p- > I am writing 1 </ the p- > 

    < the p- > I text 2 </ the p- > 

    < the p- > I am writing 3 </ the p- > 

</ div > 

< div class = "BOX2" > 

    < the p- >I am writing 4 </the p- > 

    < the p- > I am writing 5 </ the p- > 

    < the p- > I am writing 6 </ the p- > 

</ div >

Third, the source code:

D136_PseudoElementSelector.htmlD137_ClearFloatFive.html

address:

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 (Xi Jun Jun Moods do not know - Rui)

3. Park blog: https: //www.cnblogs.com/ruigege0000/

4. Welcomes the focus on micro-channel public number: Fourier transform, personal account only for technical exchanges, backstage reply "gifts" big data acquisition Java Learning Video Package

HTML serial pseudo-element selector 50, remove five floating manner

Guess you like