CSS style inheritance and cascading

This article mainly introduces the CSS style inheritance and cascading related materials, the need for friends can refer to the following

One: Basic Selector

Tag selection: Select from the tag name on the page to apply the style directly to the specified label.

Characteristics:

1. The tag selector selects all the specified tags in the current year's page;

2. The tag Selector has no association with the current tag hierarchy of the code and can be selected as long as it is on the current page.

ID Selection: You need to specify a label setting ID value (the ID value cannot be repeated only on the entire page).

Class Selection: Select the specified label through the class selector by giving the tag a class name.

Two: three sets of complex selectors

1. Descendant Selector

A, you can find the following sub-tags according to the label in the current selection

B, descendant selector can be multi-layer accurate selection

2. Intersection Selector

Format: First layer Select Second layer Select {}

Note: Dots represent intersections, usually beginning with labels

3. Set Selector

Format: First selector, second selector, ... {}

Third: CSS Inheritance

Definition: There are some styles that will be set for the current tag while setting it to the Descendants tab.
Note: Tags that inherit from the style and the label that defines the style must be subordinate (descendant label relationships)
Basic properties for Text style settings can be inherited (color color\ style text\ font font\ line property)
All property settings (border, positioning, layout) for the box model (p, span, and so on) cannot be inherited

Four: CSS cascading

Definition: When multiple selectors work on the same label at the same time, they are styled according to the priority level

How to determine the selector:

-Pass the weighted value judgment method
-Weights (ICE) with each selection of the ID selection, class selection, tag selection quantity
-Compare ID weights first, compare classes again, and finally compare tags
-All in the same order of comparison

Note: If the weights are the same, then overwrite the front. The premise of a number of weights is to ensure that each selector must have the specified element selected.

If the scope does not directly affect the label itself, it is the nearest principle

Important highest priority, * lowest priority level