Detailed explanation of CSS style stack rules

Time:2020-6-23

CSS style rule syntax style is the basic unit of CSS. Each style rule is composed of two basic parts: selector and sound block.

Selectors decide which elements to style;

The declaration block defines the corresponding style. It is contained in a pair of curly braces and consists of one or more declarations. Each declaration consists of an attribute and a value separated by a colon.

Syntax:

Property name 1: property value 1;
Property name 2: property value 2;
Property name 3: property value 3;

1. Find all declarations applied to each element and attribute

When the browser loads each page. Based on this, every CSS rule will be found to represent all affected HTML elements

2. Sort by order and weight

The browser checks 5 sources in turn and sets the matching properties. If a matching property is also defined at the next source, the value of that property is updated.

5 sources: 1. Browser default style sheet 2. Set browser font size to change the default style 3. CSS file referenced by link 4. Style code written in style 5. Inline style

Declare weights. Below! Important is used to increase the weight of the declaration. In this way, no other sources should be considered.

       p {color:green !important; font-size:12pt;}

The order determines the weight. If both rules affect the same attribute of an element, and they have the same degree of specificity, the rule with the lowest position (or later declaration) wins.

3. Sort by specific degree: the specific degree indicates how clear a rule is

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

The second rule has both tag name and class name, so it is more specific. The second rule will cover the first rule.

Calculation specificity: ice formula

1. If there is an ID in the selector, add 1 to the position of I;

2. If there is a class in the selector, add 1 to the position of C;

3. If there is an element (label) name in the selector, add 1 to the position of E;

4. Get a three digit number.

OK, let’s take a few examples to analyze the specific degree.

P 0-0-1 specificity = 1

p. Largetext 0-1-1 specificity = 11

P × largetext 1-0-1 specificity = 101

Body P × largetext 1-0-2 specificity = 102

body p#largetext ul.mylist 1-1-3 specificity = 113 body P × largetext ul.mylist li 1-1-4

Specificity = 114

Here, each selector is more specific than the previous one.

4. What are CSS selectors? Which properties can be inherited?

1. ID selector (ා myid)

2. Class selector (. Myclassname)

3. Label selector (div, H1, P)

4. Adjacent selector (H1 + P)

5. Sub selector (UL > LI)

6. Descendant selector (Li a)

7. Wildcard selector (*)

8. Property selector (a [rel = “external”])

9. Pseudo class selector (A: hover, Li: nth child)

*Inheritable styles: font size font family color, UL Li DL DD DT;

*Non inheritable style: border padding margin width height;

This article is about the detailed explanation of CSS style stack rules. For more information about CSS style stack, please search previous articles of developepaer or continue to browse the following articles. I hope you can support developepaer in the future!

Recommended Today

What are the new methods of visual + map technology?

Last week, Ren Xiaofeng, chief scientist of Alibaba Gaode map, made a technical exchange with you on the development of computer vision related technology and the application in the field of map travel at the online live broadcast activity of “cloud dialogue” between senior students of Alibaba. The interaction between live broadcast is hot. Especially […]