Inherited properties of selectors

Summary of the three major features of CSS

#### 2.1 Inheritance

##### 2.1.1 Concept

A mechanism for passing attributes from parent elements to descendant elements.

##### 2.1.2. Performance

Descendant elements inherit the properties of the parent element.

##### 2.1.3. Summarize the common inheritable attributes

font-size、font-style、font-weight、font-family、font、text-align、text-indent、cursor、list-style等

##### 2.1.4, Mandatory inheritance

Every CSS property accepts these values ​​inherit, indicating that inheritance is forced on".

##### 2.1.5 Function

Proper use of inheritance can simplify code and reduce the complexity of CSS styles.

#### 3.2. Priority

##### 3.2.1 Overview

The browser uses priority to determine which attribute values ​​are most relevant to an element, and then apply these attribute values ​​to the element.

Styles don't conflict, precedence doesn't make sense. Precedence only matters when there are multiple conflicting declarations for the same element.

##### 3.2.2 Inline styles and priority of selectors

Overview: Priority is based on matching rules composed of different types of selectors. A priority is a weight assigned to a given CSS declaration, determined by the value of each selector type in the matched selectors.

> Overview: The weight of the selector is expressed as 4 parts, such as 0, 0, 0, 0

The value of a selector is determined as follows:

>

>(1) For each ID attribute value given in the selector, add 1, 0, 0, 0

>

>(2) For each class attribute value, attribute selection or pseudo-class given in the selector, add 0, 0, 1, 0

>

>(3) For each element and pseudo-element given in the selector, add 0, 0, 0, 1

>

>(4) Associators and wildcard selectors do not contribute to specificity. Its specificity is 0,0,0,0

>

>(5) The specificity of each inline declaration is 1, 0, 0, 0

**Summarize:**

The weight calculation method of a compound selector is: the weight accumulation of all the single selectors that make up it; the number of comparisons before the same level, and different levels cannot be crossed.

##### 3.2.3 Priority of inherited styles

Overview: Every CSS rule applied directly to an element always takes over/takes over the rules that the element inherits from its ancestors.

Guess you like

Origin blog.csdn.net/pbaiking/article/details/129234596