Space in CSS Selector

An HTML document is a tree structure. Each element forms a 'tree' view based on a hierarchy. Each element in the document tree is either the parent element of another element or the child element of another element. In this way, the elements form a parent-child relationship '. Based on this relational model, CSS defines the descendant selector, also known as contextual selector ).

The descendant selector is written as follows. The child element forms a connection relationship between the space and the parent element to form the selector, for example:

Div Span { Color : Blue ; }

 

The result of the above rule is: "Any span element that is the descendant of the DIV element is displayed as a blue font ".

A space between selectors is a Combinator ). Each space character can be interpreted as "... in... ","... as...... as... but the selector must be read from the right to the left-the third edition of CSS authoritative guide

CSS also has two kinds of selectors: class selector and ID selector, the Detailed Rules are not the focus of this article.The focus of this article is: the space in the Child selector, class selector and ID selector combination of various problems, and solutions.

Take a look at the following rules:

Div. Blue { Color : Blue ; }

The result of the above rule is: "All DIV elements whose class attribute value is blue are displayed as blue fonts ". However, my requirements are not the same. My requirements are as follows: "Any element whose class attribute value is blue as the descendant of the DIV element is displayed as a blue font ". Try the following rules:

Div. Blue { Color : Blue ; }

The improvement of the above rule is that there is a space between 'div 'and'. Blue'. Can this form a descendant selector? The answer is no! The result of this rule is still: "All DIV elements whose class attribute value is blue are displayed as blue fonts ".

So how can we combine the class selector to form the effect of the descendant selector? There are some methods, that is, to set a class or ID attribute for the parent element Div. If I add a class attribute to it, the rule becomes:

Div. Contain. Blue { Color : Blue ; }

The result of the preceding rule is: "All DIV elements whose class attribute value is contain are displayed as blue elements in the future ". Although the results cannot fully meet my demanding requirements, they are very close. The effect must be very obvious, but I found that there is no blue font, because I wrote the rule:

Div. Contain. Blue { Color : Blue ; }

The difference between the above rules is that there is a missingSpace! With spaces missing, the selector is not a descendant selector, but another type of selector: "multi-class selector ".

In HTML, a class value may contain a word list, separated by spaces. The preceding multi-class selector can only apply rules to elements in the following format:

< Div Class = "Contain blue" > Text </ Div >

If one of the above class attribute values is missing, the font cannot be displayed in blue!

Put the above rules together to make it clearer:

1 Div. Contain. Blue { Color : Blue ; } /* Descendant Selector */
2 Div. Contain. Blue { Color : Blue ; }   /* Multi-class selector */

The preceding rules apply the following elements:

1 < Div Class = "Contain" > Contain < Span Class = "Blue" > Blue </ Span > <! -- Descendant -->
2 < Div Class = "Contain blue" > Contain and blue </ Div > <! -- Multiple Categories -->

It is worth noting that:The ID attribute cannot contain a list of words separated by spaces.. Therefore, the following rules cannot be applied to any element:

Div # contain # Blue { Color : Blue ; }

The preceding rules cannot be applied to any element. You can only use spaces to separate two ID selectors to form a descendant selector.

 

In summary, the space between selectors is a combination character. to form a descendant selector, The Selection Characters on both sides of the space must be in the following two forms:

1. Element selection character space element selection character
2. Non-element selector, space, non-element Selector

An absolutely impossible scenario in the descendant selector: the element selector [space] is not an element selector.

Most importantly, if there is a space between two class selectors, the Child selector is formed. If there is no space between them, the multi-class selector is formed.

Reference: CSS authoritative guide: the third edition Eric A. Meyer translated by Yin zhizhong Hou Yan