css details review notes--structure and cascading_html/css_WEB-ITnose

Each legal document will generate a structure tree. With the ancestors of the structure tree elements, attribute sibling elements, etc., selectors are created to select elements. This is the core of CSS inheritance . Inheritance is the mechanism used to pass attribute values ​​from one element to descendant elements. When deciding which values ​​to use for an element, the user agent must not only consider inheritance, but also consider specificity. In addition, the source of the declaration itself needs to be considered. This process is called cascading.

This article discusses the relationship between 3 mechanisms: specificity, inheritance and cascading.

Speciality

The same element can be selected using different methods. But for each rule, the user agent computes the selector's specificity and appends that specificity to each declaration of the rule. If an element has two or more conflicting attribute declarations, the declaration with the highest specificity wins.

Specificity calculation rules:

1) For each ID attribute value given in the selector, add 0100

2) For each class given in the selector Attribute value, attribute selection or pseudo-class, add 0010

3) For each element and pseudo-element given in the selector, add 0001

4) Combiners and wildcard selector pairs Specificity does not contribute anything

For overlapping selections, if multiple rules are met, these rules will be calculated cumulatively. The specificity of 0011 is better than 0001, and 0100 is better than 0022. This is because the values ​​are ordered from left to right.

Question: The following selectors point to the same element, what should be the color of the container?

div.container div.bright{background: #996699;} div.bright{background: #99CCCC;} div#id216{background: #FFFF66;} #id216{background: #CC3333;} div.container div#id216{background: #333399;}

Inspect the particularity, the answer is #333399; the particularity is: 0022, 0011, 0101, 0100, 0112

Note :Specificity is not the be all and end all of conflict resolution, in fact all style conflict resolution is handled by the cascade.

So far we have only seen specialties starting with 0. Generally, the first 0 is reserved for inline style declarations, which are more specific than all other declarations.

<div class ="bright" id ="id216" style="background:#003300"></div>

Sometimes a certain statement may be so important that it outweighs all other statements and is allowed to be inserted before the closing semicolon of these statements! important to mark.

#id216{ background: #990033 !important;}

When the style sheet is added! important, the inline conflict style will be invalid, and important will prevail.

Inheritance

Based on the inheritance mechanism, styles are not only applied to the specified element, but also to its descendant elements.

In general, most box model properties (including margins, padding, background, and borders) are not inherited. The reason why is because if these properties were inherited, the document would become more confusing.

The inherited value has no specialness at all, not even 0 speciality. (0 speciality is stronger than no speciality)

One of the possible problems with using wildcard selectors indiscriminately is that since they can match any Yuan Shu, wildcard selectors often have a short-circuit inheritance Effect.

Cascading

If two rules with equal specificity are applied to the same element at the same time, the browser will pass CascadingResolve this conflict.

The approach that css is based on is to cascade styles over everything, and this is done through a combination of inheritance and specificity. Cascading rules:

1) Find all relevant rules that contain selectors that match a given element.

2) Sort all declarations applied to this element by explicit weight. Rules with the !important flag have higher weight than rules without the !important flag. The statement weight considers 5 levels: (the order of weight from large to small is)

1. Important statement from readers

2. Important statement from creative staff

3. Creation Normal declarations for people

4. Normal declarations for readers

5. User agent declarations

3) Sort all declarations that apply to a given element by specificity. Elements with higher specificity have greater weight than elements with lower specificity.

4) Order all declarations applied to a given element in order of appearance. The later a declaration appears in a style sheet or document, the greater its weight. . If there are imported style sheets in the style sheet, it is generally considered that the declarations that appear in the imported style sheet come first, and all declarations in the main style sheet come last.

Note: Multi-class selectors separate different class names with spaces. However, according to the rules of cascading, the order of classes in the element has nothing to do with it, but is related to the position of the style sheet declaration. .

<div class = "box red blue yellow"></div>

red, blue, and yellow set conflicting background color attributes. However, the final color displayed by the box has nothing to do with the order of these three classes in html. The declaration style sheet is as follows:

.red{background: red;}.yellow{background: yellow;}.blue{background: blue;}

The final color displayed by the box is related to the order of declaration, and the final display is the blue background color.