The following list of selector types increases by specificity, in ascending order:
1. Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
3. ID selectors (e.g., #example).
Universal selector (*), combinators (+, >, ~, ' ', ||)
and negation pseudo-class (:not()) have no effect on specificity.
(The selectors declared inside :not() do, however.)
Try to avoid using !important and instead consider:
1. Make better use of the CSS cascade
2. Use more specific rules.
By indicating one or more elements before the element you are selecting,
the rule becomes more specific and gets higher priority: