CSS selector inheritance and cascading

CSS selectors and their inheritance characteristics, cascading properties
1. Basic Selector
Tag ID class This is no longer an introduction.

2. Composite Selector
Intersection
The intersection selector consists of two selectors that are directly connected, with the result that the intersection of their respective element ranges is selected
The first one must be a tag selector, the second must be a category selector or an ID selector, which should be written consecutively
For example, Div.class

and set
The result of the set selector is to also select the range selected by each base selector, any type of selector (including
tags, class selectors, ID selectors) can be part of the set selector, and they are concatenated with commas
such as, Div,class,h3, #nav

Offspring
Given the existence of nested relationships in the DOM tree, it is very convenient to use a descendant selector to set the individual elements by combining them
Style without having to give each element an ID or class name, making the naming much simpler and clearer
A variety of basic selectors can be freely combined, unrestricted
such as Div class H3 (meaning the H3 under the class of the selected Div)

Offspring
The difference between a descendant selector and a descendant selector is the use of the greater-than sign connection
such as Div>span
Note: The difference between descendants and descendants is that the effect of the descendant selector is not limited to the "immediate descendants" of the element, but also affects its

"Descendants of all levels", and the influence of the offspring is limited to the selected descendants of the element itself.

3. Inheritance Features
Inheritance attributes can be summed up as child elements have all the CSS properties of the parent element, even if the child element is set separately, it is only
Additional settings override property values inherited from parent elements

4. Cascading features
Cascading features can be summed up in order of precedence between styles
Inline styles >id styles > Category styles > Marker styles
For example, the current element is set to a different style in the above four cases, then the result of the final display is the inline style
property, so we remove the inline style, and then we display the ID, class style

CSS selector inheritance and cascading