Second the developer.mozilla.org documentation:
The provenance is defined in 3 levels
1. Importance
Styles with !important precede all others and have higher priority.
Following are the inline style defined, that is, in the element itself, within style :
<div style="border: none"><div>
Then the priority is:
Selector by ID : #id {...}
Selector by name of class : .classe {...}
Selector by tag name: div {...}
2. Specificity
It is measured based on how specific a selector is - how many elements it can match / achieve.
There is a certain "calculation" to be determined, to understand see the link: Specificity
But a simple way to understand it is: the more specific a selector the higher its priority. Here is an example of the link above:
HTML :
<div id="test">
<span>Text</span>
</div>
CSS :
div#test span { color: green; }
div span { color: blue; }
span { color: red; }
In this example, the color will be green, since it is the most specific selector ( span nested with div , with ID="test" ), regardless of the order the selectors were declared.
3. Order
In a basic way, if the above criteria do not prioritize the rule, it follows the order they were declared
Another great source here: www.w3.org
