Detailed explanation of CSS cascading mechanism

CSS (Cascading Style Sheet)

Cascading in cascading style sheets means that styles will be passed from one level to another in the document structure, and its role is to let the browser decide what to use in many sources. , to apply style attributes from which source for a label.

Cascading is a powerful mechanism. Understanding cascades can help you write CSS in the most economical and maintainable way, and can help you create the ideal document look you want.

Source of styles

First of all, there should be a browser style sheet (default style sheet) hidden in the browser, because each tag will have a style without writing anything. For example, the text in the h1 tag will appear in larger bold, the text in the em tag will appear in italics, etc., everything is added automatically.

Secondly, there is the user style sheet. Very rare, but can provide great convenience. For example, visually impaired users can increase the base size of text themselves (for example: body { font-size:200%}), or force text to appear in legible colors relative to each other. Accessibility features in Windows can add style sheets.

Finally, there is a designer stylesheet. It's written by web developers.

The order in which browsers treat style sources:

Default browser style sheet

User style sheet

Designer style sheet

Designer embedded style

Designer inline style

When the browser searches for the style at the corresponding position in the above order, if it encounters the attribute value defined for a certain tag, it The settings for the corresponding label will be updated. The browser defines the style of the label in the default style sheet. If the style is also defined for the label elsewhere, the browser will update the setting to the value defined by the document.

These are the basic working principles of cascading.

Cascading Rules

Rule 1: Find all declarations of good attributes that apply to each element.

Rule 2: Sort by order and importance. The browser checks the five style sources in sequence and sets any matching attributes. If a later origin sets a matching attribute again, the browser updates the attribute's value if necessary and repeats the process.

Rule 3: Sort by relevance. In situations where it is difficult to make a judgment (for example, two rules match the same tag and come from the same style source), pertinence can determine the winner of the rule.

Example 1: The style sheet contains these two rules,

P {font-size:12px;}

p.largetext { font-size:16px; }

Then, the text in

A bit of text

will be displayed as 16 pixels high. Because the latter is more targeted.

P {font-size:12px;}

.largetext { font-size:16px; }

Both rules match the same tag, but because of the class The selector takes precedence, so the text will display 16 pixels. The specific reason is: the numerical targeting of the label selector is 1, while the targeting of the class selector is 1-0. There is a problem of how to calculate the targeting of the selector. There will be a simple scoring system for each style, and the score is represented by 3 values ​​​​as follows:

                                                                                                                                                                                                     . The scoring method is as follows:

1. If there is an ID in the selector, add 1 to A.

2. If there is a class in the selector, 1 must be added to B.

3. There is an element name (tag name) in the selector, so you need to add 1 to C.

4. The final result is calculated based on the three-digit certificate. (The result is not a real three-digit number, but in most cases, it is easier to interpret it as a three-digit number. For example, compared with 0-1-12 and 0-2-1, the latter is more specific Sexuality)

Look at the following set of examples:

P 0 – 0 – 1 Targetedness=1

p.largetext 0 – 1 – 1 Targetedness=11

p#largetext 1 – 0 – 1 Targeted=101

body p#largetext 1 – 0 – 2 Targeted=102

body p#largetext ul.mylist 1 – 1 – 3 Targeted=113

body p#largetext ul. mylist li 1 – 1 – 4 Targeted=114

Rule 4: Sort in order. If two rules have exactly the same weight, the rule lowest in the stacking order takes precedence.

Specificity is more important than order, so rules with higher specificity take precedence over less specific rules that are closer to the bottom of the cascade.

The above is the detailed content of Detailed explanation of CSS cascading mechanism. For more information, please follow other related articles on the PHP Chinese website!