Link

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity

The order

  1. [LOW] Example: p {} has low specificity (0,0,1) because it is an element selector
  2. [MEDIUM] Example: .class {} has medium specificity (0,1,0).
  3. [HIGH] Example: #ident {} has high specificity (1,0,0).
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Specificity Example</title>
  <style>
    /* LOW specificity */
    p {
      color: blue; /* specificity 0,0,1 */
    }

    /* MEDIUM specificity */
    .highlight {
      color: green; /* specificity 0,1,0 */
    }

    /* HIGH specificity */
    #important {
      color: red; /* specificity 1,0,0 */
    }

    /* SAME specificity as .highlight */
    .note {
      color: orange; /* specificity 0,1,0 */
    }

    /* This comes later, so it overrides .note */
    .note {
      color: purple; /* specificity 0,1,0 */
    }
  </style>
</head>
<body>
  <p>This text will be blue (element selector wins on its own)</p>
  <p class="highlight">This text will be green (class overrides element)</p>
  <p id="important" class="highlight">
  This text will be red (id overrides both class and element)
  </p>
  <p class="note">
  This text will be purple (two rules with same specificity, last one wins)
  </p>
</body>
</html>