The difference between a CSS style name and a space, no space, and greater than sign

Look at the code today, practice the demo when you find the CSS style sheet inside. Layout.float. left{} The wording of some doubts, the understanding of the following information:

CSS Multi-Class Selector

By linking multiple class selectors together, you can select only the elements that contain these class names (the order of class names is unlimited)

. layout.float no spaces between the two

For example:

. Layout{ color: red;}

<class= "layout float"> selected element </Div >

Note: in versions prior to IE7, Internet Explorer on different platforms did not handle multi-class selectors correctly.

CSS descendant Selector

. layout. Float is separated by a space, which represents the descendant selector, which is selected in. layout. Float (The level interval between two elements can be infinite)

. layout. Float {  color: orange;}

<class= "Layout">    <class= " Float "> selected elements </div></Div >

CSS child element Selector

. layout >. float middle is the greater than sign, which represents the element's child elements

. Layout >. float {  color: blue;}

<Divclass= "Layout">    <Divclass= "float">Selected elements</Div>    <Div>        <Divclass= "float">There are no selected elements</Div>    </Div></Div>

So. Layout.float. left{} means that the class name contains the element "layout float" whose descendant class name contains the element "left" selected.

The difference between a CSS style name and a space, no space, and greater than sign