Differences in CSS about whether multiple selectors contain spaces_html/css_WEB-ITnose

The difference in CSS about whether multiple selectors contain spaces

There is a big difference between multiple selectors in CSS containing spaces and not containing spaces, and the following meanings are distinguished:

#header.callout { }#header .callout { }

The first one represents the selector with the ID of header and the class name of callout,
The second one represents the selector with the class name of callout in the child node with the ID of header

We use the following example to show:

#header.callout { }<div id="header" class="callout"></div>

#header .callout { }<div id="header" class="callout">    <div class="callout">    </div></div>

#header .callout { } What we select is the sub-div with the class name callout.

Copyright Statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.