The final look of a web page is the result of various CSS declarations stacked together. Take the following HTML document as an example:


      
<html lang="en">
<head>
  <title>Document</title>
  <style>
    h1 {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1 style="font-size: 10px">h1 title</h1>
</body>
</html>
Copy the code

As anyone with a bit of HTML and CSS can see, the final font size for h1 is 10px because inline styles take precedence.

Open the Chrome development tool and you can see that there are three declarations for the font size of h1. The browser decides which value to ultimately use based on various considerations. The PK process of each declaration is called cascade. The outcome of PK is determined by the following three aspects:

  1. Where does the element’s style declaration come from?
  2. How specific is this declaration?
  3. Whose Order of Appearance came first?

Let’s discuss each of these three areas.

Origin (Origin)

By source I mean where is the CSS declaration? The CSS standard divides Origin into three main categories:

  1. The Author Origin. Site developers write their own style
  2. The User Origin. Custom styles added by the user browsing the web
  3. User Agent Origin: Default style given by the User agent. For example, in the example above, Chrome gives h1 a default font size of 2em.

Based on the source, the browser judges the Importance of the declaration. The criteria are simple:

  1. Queue 1: User Agent set! Important is the most important, User set! Important for Author! Important statement.
  2. Queue 2: the normal declaration of Author; A common declaration of User; Common declaration for User Agent.

In a stacked PK, if the same selector is of different importance, then the PK of Origin will decide the winner.

Here’s an example:

In Origin PK:

Number 1 is the normal declaration for User; Contestant number two belongs to the user! Important statement; Player 3 is a normal statement of User Agent so player 2 wins 👏 👏 👏 👏

Specificity

If the declaration of two attributes is equally important, then it is time to PK particularity, which is for the selector.

The w3 standard describes the calculation of particularity as follows:

A selector’s calculated for A given element as follows:

  • count the number of ID selectors in the selector (= A)
  • count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
  • count the number of type selectors and pseudo-elements in the selector (= C)
  • ignore the universal selector

Translate and organize the language as follows:

The particularity of a selector is calculated as follows:

Count the number of ID selectors (denoted as A)

Count the number of class selectors, attribute selectors and pseudo-class selectors (denoted as B)

Count the number of element selectors and pseudoelement selectors (denoted by C)

There is a recommended website for evaluating a practical selector online: simply.keegan.st /

We use a triple to record the particularity of a selector, for example:

ul    ---->  (0, 0, 1)
ul.ul   ---->  (0, 0, 2)
#list    ----> (1, 0, 0)
#list #sub-list li  ---> (2, 0, 1)
#list .list-item ---> (1, 1, 0)
Copy the code

So how do you compare the priorities of two triples once you have them?

  • Compare A, the bigger wins
  • If A is the same, compare B, the bigger B wins
  • Finally compare C

Also take 🌰 :


      
<html lang="en">
<head>
  <title>Document</title>
  <style>
    h1 {
      color: green;
    }

    h1#title {
      color: red;
    }

    h1.title {
      color: blue;
    }
  </style>
</head>
<body>
  <h1 id="title" class="title">h1 title</h1>
</body>
</html>
Copy the code

H1 will eventually appear in red:

In the three declarations above, the selector corresponds to the following particularity:

The selector group ID Number of selectors Number of class or attribute selectors Number of element or pseudo-class selectors particularity The results of
h1#title 1 0 1 (1, 0, 1) 👏 👏 👏
h1.title 0 1 1 (0, 1, 1) 💔
h1 0 0 1 (0, 0,) 💔

Order of Appearance

Needless to say, the first two rounds of PK without results in accordance with the sequence of appearances come from behind to determine the final outcome.

inheritance

Elements with CSS declarations are retired, and elements without CSS declarations are left to inherit or default styles.

Some style declarations inherit to child elements (color, font size), while others do not (border, etc.).

conclusion

CSS cascading is the process of considering style sources, selector specificities, and inheritance to determine the final look.