CSS selector and Its Inheritance and cascade features

CSS selector and Its Inheritance and cascade features
1. Basic Selector
Mark ID class.

2. Compound Selector
Intersection
The intersection selector is composed of two directly connected selectors. The result is the intersection of the selected element ranges.
The first must be a tag selector, and the second must be a category selector or ID selector, which must be continuously written.
For example, Div. Class

 

Union
The result of the Union selector is to select the range selected by each basic selector at the same time, any form of selector (including
Mark, class selector, Id selector) can be used as part of the Union selector, they are connected by commas
For example, Div, class, H3, # nav

Descendant
The DOM tree is used to identify the existence of nested relationships, and the descendant selector can be used to conveniently set each element through combination.
Style, without the need to name each element ID or class, so that the name is greatly simplified and organized
Various basic selectors can be freely combined without restrictions
For example, div class H3 (that is, H3 under the class under the selected Div)

Child
The difference between the child selector and the Child selector is that a greater than sign is used to connect the child selector.
For example, div> Span
Note: The effect of the descendant and descendant is that the influence of the descendant selector is not limited to the "direct descendant" of the element, but also affects it.

And the influence of the child is limited to the selected child of the element.

3. inheritance features
The inheritance feature can be summarized in one sentence as the child element has all the CSS attributes of the parent element, even if the child element is set separately, it is only
Additional settings overwrite the property values inherited from the parent Element

 

4. cascade feature
the cascade feature can be summarized as the priority order between different styles
intra-row styles> ID styles> category styles> tag styles
for example, the current element sets different styles in the above four cases, so the final display result is the
attribute of the intra-row style. In this way, we remove the intra-row style, display the ID and class styles by analogy.