Three major Css mechanisms (features): particularity, inheritance, details of cascade, css Cascade

Three major Css mechanisms (features): particularity, inheritance, details of cascade, css Cascade

Inheritance(Inheritance) is a mechanism used to pass attribute values from an element to its child element. When determining which values should be applied to an element, the user agent (browser) should not only consider inheritance, but also consider declaringSpecial(Specificity). In addition, you need to consider the source of the Declaration. This process is calledCascade(Cascade ). Here we will discuss the principles and associations of the three css mechanisms.

I. particularity

Consider the following two rules. Assume that each rule matches the same element:

h1 {color: red; }body h1 { color:green;}

h2.grape {color: purple;}h2 {color: siver;}

Only one rule can win, because only one color can be matched. How can we know which rule is better? The answer lies in the particularity of each selector.

1. Special Value:

The particularity of a selector is determined by its component. The special value is expressed as four parts: 0, 0, 0.

The specific particularity of a selector is determined as follows:

• For inline styles: 1, 0, 0, 0.
• For the ID attribute value in the selector, add 0, 1, 0, 0.
• For the class property value, attribute selection, or pseudo class in the selector, add 0, 0, 1, 0.
• For the elements and pseudo elements in the selector, add 0, 0, 1.
• Wildcard selector (*), with 0, 0, 0.

Special attribute calculation value:

H1 {color: red;}/* specificity =, */p em {color: purple;}/* specificity = */. grade {color: purple;}/* specificity = 0, 0, 1, 0 */*. bright {color: yellow;}/* specificity =, */div # header [href] {color: black;}/* specificity =, 1, 1 contains an attribute selector */

2. Importance ! Important

Sometimes some declarations may be very important beyond all other lives. You can insert a semicolon before the end of the Declaration.

! Important.

P {color ; red ! important; background: yellow}

Ii. css inheritance

 

Contains two lists, one unordered and one ordered. Apply the color: gray to the body element. This value is then propagated down the tree to the child element and continues until no more child elements inherit this value. (The element does not pass the value up to its ancestor, but there is an exception. The background style applied to the body element can be passed to the html element .)

2. attributes that can be inherited

The attributes that can be inherited in css are summarized as -- all attributes about the text image size and style can be inherited (for example: letter-spacing, word-spacing, white-space, line-height, color, font, etc)

3. Special attributes of Inheritance

The inherited value has no special characteristics, and even has no special characteristics.

 

Iii. Cascade

If two rules with the same special characteristics are applied to the same element at the same time, how does the browser solve this conflict? For example

h1 {color: red;}h1 {color:blue;}

These two rules have the special characteristics of 0, 0, and 1, so their weights are equal. But an element cannot be red or blue, so it must be applied.CascadeRules.

1. Find all the relevant rules that contain a selector that matches a given element.

2. Sort all declarations that use this element according to the display weight. Sign (! Important) rules are more important than those (! Important) Flag rules. Sort by all the meanings of elements used by the source. creators> readers> User agents.

The order of weights from large to small is:

• A. important comments from readers.
• B. important statement of the Creator.
• C. Normal statement of the Creator.
• D. The reader's normal statement.
• E. User proxy statement.

3. Sort all declarations corresponding to specific elements. Element rights with higher particularity are more important than those with lower particularity.

4. Sort all declarations corresponding to the given element in the order of appearance. A declaration appears after a style sheet or document, and its weight increases. If an imported style table exists in the style sheet, it is generally considered that the declaration that appears in the imported style sheet is prior to that in the main style sheet.

 

Iv. Summary

 

The most basic aspect of a stacked style sheet is stack-the Declaration of conflict should be sorted through this cascade process.

 

 

Reader's important statement (! Important)> important statement of the creator (! Important)> inline style (,)> id selector (,)> class selector, attribute selector, pseudo class selector (,)> element selector, 0, 1)>

Wildcard selector (0, 0, 0)> inherited attributes> default browser style.

 

Special case: <a> the color and text-decoration attributes of the element, the font-size attributes of the title element, the default style priority of the browser, and the inheritance attribute priority.