Detailed explanation of CSS style cascading rules

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

The selector determines which elements the style is applied to;

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

grammar:

Attribute name 1: attribute value 1;
Attribute name 2: attribute value 2;
Attribute name 3: attribute value 3;

1. Find all declarations applied to each element and attribute

The browser loads each page. Each CSS rule will be found accordingly, indicating all the affected HTML elements

2. Sort by order and weight

The browser checks each of the five origins in turn and sets the properties that match. If the matching attribute is also defined in the next source, update the value of the attribute.

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

Declare weight. as follows! important is used to increase the weight of a statement. This way no other sources need to be considered.

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

The order determines the weight. If two rules affect the same property of an element, and they are equally specific, the rule that comes most downstream (or declared later) wins.

3. Sort by specificity: Specificity indicates how clear a rule is.

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

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

Calculating 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 (tag) name in the selector, add 1 to the position of E;

4. Get a three-digit number.

OK, let's use a few examples to explain 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 the CSS selectors? Which properties are inherited?

1.id selector (#myid)

2. Class selector (.myclassname)

3. Tag selector (div, h1, p)

4. Adjacent Selector (h1 + p)

5. Child selector (ul > li)

6. Descendant selector (li a)

7. Wildcard Selector ( * )

8. Attribute selector (a[rel = "external"])

9. Pseudo-class selectors (a:hover, li:nth-child)

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

* Non-inheritable styles: border padding margin width height;

This is the end of this article on the detailed explanation of CSS style cascading rules. For more relevant CSS style cascading content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!