[Reading Notes] CSS authoritative guide 2: Structure and cascade-cannon ~

[Reading Notes] CSS authoritative guide 2: Structure and cascade-cannon ~ One of the most basic aspects of a stacked style sheet is stack-the conflicting statement should be sorted through this stack process, and the final document representation should be determined accordingly. The core of this process is the particularity of the selector and its related declarations, as well as the inheritance mechanism.

Special

For each rule, the user agent calculates the particularity of the selector and attaches This particularity to each declaration in the rule. If an element has two or more conflicting attribute declarations, the declaration with the highest specificity will win.

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

For each ID attribute value given in the selector, add 0, 1, 0, 0.

For the attribute values of each class specified in the selector, select the attribute or pseudo class, and add 0, 0, and 1. 0.

Add 0, 0, 0, and 0 to each element and pseudo element in the selector.

Inline style, plus.

The delimiter and wildcard selector have no contribution to the particularity.

h1{color:red;}/* specifity = 0,0,0,1 */p em{color:purple;}/* specifity = 0,0,0,2 */.grape{color:purple;}/* specifity = 0,0,1,0 */*.bright{color:yellow;}/* specifity = 0,0,1,0 */p.bright em.dark{color:maroon;}/* specifity = 0,0,2,2 */#id216{color:blue;}/* specifity = 0,1,0,0 */p#sidebar *[href]{color:silver;}/* specifity = 0,1,1,1 */h1+p{color:black;font-style:italic;}/* specifity = 0,0,0,2 */Green /* specifity = 1,0,0,0*/

Importance

CSS allows Insert before the end of these declarations! Important.

p.dark {color:#333 !important; background: white;}

Marked! The important statement does not have a special value, but it must be considered separately from the non-important statement. Actually, all! Important statements are grouped together. Special conflicts in important statements are resolved within important statements, rather than being mixed with non-important statements. If an important statement conflicts with a non-important statement, winning is always an important statement.

Inheritance

A style is not only applied to a specified element, but also to its child element.

/* When color: gray is applied to the ul element, this element uses this declaration. This value then spreads down the tree to the child element and continues until no more child elements inherit this value. The value will never be transmitted upwards, that is, the element will not pass the value up to its ancestor. * // * Note: In HTML, there is an exception to the upward propagation rule: the background style applied to the body element can be passed to the html element (html is the root element of the document ), you can define the canvas accordingly. */Ul {color: red ;}

Generally, most frame model attributes (including the outer margin, inner margin, background, and border) cannot be inherited.

The inherited value is not special at all, and even the zero special value is not.

As long as the element whose id is toolbar contains only plain text but not other content, this works normally. However, if the text in this element is a hyperlink (a), the hyperlink style of the user agent will prevail. In a Web browser, this means that their colors may be blue, because the style sheet of the browser may contain the following rules:

A: link {color: blue ;}

To overcome this problem, the following statement must be made:

# Toolbar {color: white; background: black ;}

# Toolbar a: link {color: white;} You can specify a rule directly to the element in the toolbar to overwrite the default rule.

However, the wildcard selector has a special value of 0. Once the wildcard selector is applied, it overwrites the inherited value. Therefore, the wildcard selector often has a short-circuit inheritance effect. This indicates that there may be a strange problem in using the wildcard selector for non-additional areas.

Cascade

1. Sort all declarations that use this element according to the explicit weight. Sign! Important rules are more important than none! Important flag rules.
2. Sort by all declarations corresponding to the source that use the given element. There are three sources: creators, readers, and user agents. Under normal circumstances, the style of the Creator is better than that of the reader. Yes! The reader style of the important logo must work with all other styles, including! Important logo. The style of the creator and the style of the reader are better than the default style of the user agent.
   1. Reader's! Important Style
   2. Creators! Important Style
   3. Normal style of the Creator
   4. Reader's normal style
   5. Style declared by the user agent
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 that use 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 sheet exists, it is generally considered that the declaration that appears in the imported style sheet is prior, and all the declaration in the main style sheet is later.