CSS multi-class selector

An HTML document is the structure of a tree in which elements form a "tree" view based on a hierarchy. Each element in the document tree is either a parent element of another element or a child of another element, so that a parent-child relationship is formed between the elements. Based on this relational model, the CSS defines the descendant selector (descendant selector), also known as the context selector (contextual selector).

The descendant selector is written as a descendant element that forms a join relationship between a space and a parent element to form a selector, such as:

Div span {color:blue; }

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

The space between selectors is a binding character (Combinator). Each space-bound character can be interpreted as "... In... Found in the "," ... As... Part of the "," ... As... , but requires a right-to-left read selector-the third edition of the CSS authoritative guide

CSS also has two types of selectors: class selector and ID selector, and the details are not the focus of this article. the focus of this paper is: the problems in the case of the combination of the space in the descendant selector, class selector and ID selector, and how to solve it.

Let's look at the following rules:

DIV.BLUE  { color : blue ;

Div. Blue {color:blue; }

The improvement of the above rule is that there is a space between ' div ' and '. Blue ', so is it possible to form a descendant selector? The answer is NO! The result of this rule is still: "All div elements with a class attribute value of blue are displayed as blue fonts."

So how do you combine a class selector to make a descendant selector? The way to do that is to set a class or ID attribute for the parent element Div, assuming I add a class attribute to it, then the rule becomes:

Div.contain. Blue {color:blue; }

Div.contain.blue {color:blue; }

The difference between the above rules is that a space is missing between '. contain ' and '. Blue '! Without a space, the selector above is not a descendant selector, but another selector: "Multi-class selector".

in HTML, a class value may contain a list of words separated by spaces. Then the multi-class selector above can only apply rules to elements of the following form:

< div  class = "Contain blue" > text </ div >

One of the above class attribute values is less than the font can be displayed in blue!

Putting the above rules together makes it clearer to compare them:

1Div.contain. Blue{Color:Blue;}
2Div.contain.blue{Color:Blue;} 

Each of the above two rules applies the following elements:

1 <Divclass= "contain">contain<spanclass= "Blue">Blue</span><!--Descendants -
2<Divclass= "Contain blue">contain and blue</Div><!--Multi-Class -

It is important to note that theid attribute does not allow a space-delimited list of words . So the following rules will not apply to any element:

Div#contain#blue {color:blue; }

The above rules will not apply to any element. You can only obediently separate the two ID selectors with a space, forming a descendant selector.

To sum up, the space between selectors is a binding character, if you want to form a descendant selector, then the selectors on either side of the space must be in the following two forms:

1. Element selector Space Element Selector

2. Non-element selector space non-element selector

A scenario that is absolutely impossible in a descendant selector: element selector [space] non-element selector.

Most important: The existence of a space between two class selectors constitutes a descendant selector, and no space between them constitutes a multi-class selector.

No spaces represent elements that contain these selectors at the same time

CSS multi-class selector