css-specificity-cheat-sheet.css

/* Basic specificity cheatsheet  */

h1 {
  /* Native elements have a weight of 0001. */
}

::after {
  /* Pseudo-elements have a weight of 0001. */
}

.class {
  /* Class selectors have a weight of 0010. */
}

[type="text"] {
  /* Attributes selectors have a weight of 0010. */
}

a:hover {
  /* Pseudo-classes have a weight of 0010. */
}

#id {
  /* Id's have a weight of 0100. */
}

/* Inline styles have a weight of 1000. */
<div style="color: red;">Text</div>

h1 {
  /* !imporant has a weight of 10000. */
  color: red !imporant; 
}

Nice and concise. If anyone is in doubt, chaining selectors adds up points:

body h1 is 0002 points and wins over h1's 0001 point.