Css details review notes-structure and cascade, css details review Cascade

Css details review notes-structure and cascade, css details review Cascade

Each legal document generates a structure tree, with the ancestor of the Structure Tree element, the attribute sibling element, and so on, creating a selector to select the element. This is CSS.InheritanceCore. Inheritance is a mechanism used to pass attribute values from an element to a descendant element. When it is used for an element, the user agent should consider not only inheritance, but also particularity, but also the source of the Declaration. This process is calledCascade.

This article discusses the associations between the three mechanisms: particularity, inheritance, and cascade.

 

Special

You can use different methods to select elements for the same element. However, for each rule, the user agent calculates the particularity of the selector and attaches This particularity to each declaration of the rule. If an element has two or more conflicting attribute declarations, the declaration with the highest specificity will win.

Special calculation rules:

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

2) For the attribute values of each class specified in the selector, add 0010 to the attribute selection or pseudo class.

3) add 0001 to each element and pseudo element in the selector.

4) The combiner and wildcard selector have no contribution to the particularity.

For overlapping options, if multiple rules are met, these rules will be accumulated. 0011 is more special than 0022, is better. This is because the values are sorted from left to right.

Question: The following selector points to the same element. Why is 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;}

Test particularity. Answer #333399; particularity: 0112

 

Note: Particularity does not cover all conflicts. In fact, all style conflicts are resolved in layers.

So far, we have seen the special characteristics starting with 0. Generally, the first 0 is reserved for the inline style declaration, which is more special than all other statements.

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

Sometimes a declaration may be very important. It exceeds all other statements and allows insertion before the end of these statements! Important.

#id216{ background: #990033 !important;}

When the style sheet is added! When important is used, the inline conflicting style will be invalid. The important prevails.

 

Inheritance

Based on the Inheritance Mechanism, a style is applied not only to the specified element, but also to its descendant element.

Generally, most frame model attributes (including the outer margin, inner margin, background, and border) cannot be inherited because if these attributes are inherited, the document will become more chaotic.

The inherited value is not special at all, and even the zero special value is not. (0 is more special than no)

One of the possible problems with the wildcard selector without distinction is that it can match any yuanshu, so the wildcard selector often has a short-circuit inheritance effect.

 

Cascade

If two rules with the same particularity are applied to the same element at the same time, the browser willCascadeResolve this conflict.

The method based on css is to cascade styles in everything, which is achieved by combining inheritance and particularity. Stacked rules:

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

2) sort by explicit weight corresponding to all declarations that use this element. Sign! Important rules are more important than none! Important flag rules. The declared weight should be five levels: (the weights are sorted in ascending order)

1. important comments from readers

2. important statement of the Creator

3. Normal statement of the Creator

4. Reader's normal statement

5. 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) in the order of appearance, all declarations of the given element are used. When a declaration appears in a style sheet or document, 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.

 

Note: multi-class delimiters use spaces to separate different class names. However, according to the stacked rules, the sequence of classes in the elements is irrelevant, but is related to the position declared in the style sheet.

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

Red, blue, and yellow settings conflict with the background color attribute, but the final color displayed in the box is irrelevant to the three class sequence in html. The declared style table is as follows:

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

The final color of the box is determined by the declared order, and the blue background color is displayed.