CSS selector Basics (2)

CSS structure and cascading

Inheritance is the mechanism by which attribute values are passed from one element to its descendants. When determining which values should be applied to an element, the user agent must consider not only inheritance but also the specificity of the declaration, as well as the source of the declaration. This process is called cascade. Next, let’s look at the particularity and overlap of CSS.

As the definitive GUIDE to CSS says, work hard no matter how abstract or difficult it looks! Your efforts will not be in vain.

particularity

When multiple rules are the same for an element in CSS, the browser calculates their particularity. If an element has multiple conflicting rules, the declaration with the highest particularity wins.

The specificity of a selector is determined by the components of the selector itself. The particularity value is expressed as four parts, such as: 0,0,0,0. The specific rules are as follows:

• For inline declarations (style) specificity is 1,0,0,0;
• For each ID attribute value given in the selector, add 0,1,0,0;
• For each class attribute value given in the selector, attribute selection or pseudo-class, add 0,0,1,0;
• For each element and pseudoelement given in the selector, add 0,0,0,1;
• The particularity of wildcard (*) is 0,0,0,0.
• Binding characters and inheritance have no particularity;

h1 {color: red}  / * 0,0,0,1 * /
p em{color: purple} / * 0,0,0,2 * /
.grape{color: purple} / * 0,0,1,0 * /
*.bright{color: yellow} / * 0,0,1,0 * /
p.bright em.dark{color: maroon} / * 0,0,2,2 * /
#id216{color: blue} / * 0,1,0,0 * /
div#sidebar *[href]{color: silver} / * 0,1,1,1 * /
Copy the code

Specific weights can be seen in the following table:

The importance of

Sometimes one statement can be so important that it trumps all others. CSS2.1 calls these important statements and allows them to be inserted before the closing semicolon! Important symbol.

h1 {font-style: italic ! important;
    color: gray ! important;
    background: red ! important;
}
Copy the code

Mark is! The important declaration has no special value, but should be considered separately from non-important declarations. In fact all! Important declarations are grouped together, and special conflicts for important declarations are resolved within important declarations, not mixed up with non-important declarations. Similarly, all non-important declarations are grouped together, using particularity to resolve conflicts;

Important rules win outh1 {font-style: italic ! important;
    color: gray ! important; 
    background: red ! important;
}
.title {
    color: black; 
    background: silver; {} *,background: black ! important;
}
Copy the code

Note:

• The higher the value of non-zero is, the higher the particularity is. The larger the value of non-zero is, the higher the particularity is
• Inheritance has no particularity, not even zero particularity, and wildcards have particularity, so wildcards are more special than inheritance
• Inline styles style and! Important uses the same property! Important to win

inheritance

Based on inheritance, styles are applied not only to the specified element, but also to its descendants, and continue until there are no more elements to inherit.

Inheritance is one of the most fundamental aspects of CSS, and is not considered unless there is a good reason to do so. However, the following points need to be noted:

• Note that some attributes cannot be inherited, such as border, which would make the page display messy.
• Inherited values have no particularity

<p>Structure and cascade<em>The important relationship between inheritance and wildcards</em></p>
Copy the code

p {color: gray; {} *color: red}
Copy the code

The result shows that EM does not inherit the color of the P element, but instead displays red, with 0 particularity > no particularity. The specificity of wildcard selectors is 0, so wildcard selectors > inherit.

cascading

If two rules with equal particularity apply to an element, how should the element be displayed?

Cascading rules

1. Find all relevant rules that contain a selector for a given element match.
2. Group and sort rules by importance. Sign!! The important rule has more weight than none! Rule for the important flag. Sort by source all declarations that use a given element. There are three sources: creators, readers, and user agents. Normally, the author’s style is better than the reader’s style sheet! The important flag’s reader style is stronger than all other styles, including the! The creator style for the important logo. Both the creator style and the reader style are stronger than the default style for the user agent.
3. All declarations that use a given element are sorted by particularity. The weight of elements with higher particularity is more important than that of elements with lower particularity.
4. The order of occurrence corresponds to all declaration sorts that use a given element. The later a declaration appears in a stylesheet or document, the greater its weight. If an imported stylesheet is present in the stylesheet, it is generally assumed that declarations appearing in the imported stylesheet come first, followed by all declarations in the main stylesheet.

Sort by weight and source

If two style rules are applied to the same element and one of the rules has! Important flag, this important rule will win.

In terms of weight declaration, there are 5 levels to be considered, and the order of weight is as follows:

1. Important statement from readers
2. An important statement from the creative staff
3. Normal statement from the creator
4. Reader’s normal statement
5. User agent Statement

Writers generally only need to consider the first four weight levels, because any declaration will trump the user agent style.

Order by particularity

If multiple conflicting declarations are applied to an element, and they all have the same weight, they are sorted by particularity, with the most special declarations taking precedence.

    p#bright{color:silver; }p{color:black; }Copy the code

    <p id="bright">well, hello there!</p>
Copy the code

According to the rules above, the color of the paragraph is silver because p#bright is more special (0,1,0,1) than p (0,0,0,1), even though the latter appears later in the stylesheet.

Sort in order

If two rules have exactly the same weight, source, and particularity, the one that comes later in the stylesheet wins.

In particular, the element style attribute specifies that my style is at the end of the document style sheet, after all other rules.

It is this ordering that leads to the commonly recommended link style order: link-visited-focus-hover-active (LVFHA).

:link {color: blue; }:visited {color: purple; }:focus {color: green; }:hover {color: red; }:active {color: orange; }Copy the code

Non-css presentation prompts

Documents may contain non-CSS presentation cues, such as font elements. Non-css prompts are treated with a particularity of 0 and appear at the top of the creator’s stylesheet. This presentation hint is overwritten whenever there is a creator or reader style, but not by the user agent style.