If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.

More specific = Higher precedence

If the selectors are the same then the last one will always take precedence.

div { color: green }
div { color: red }

Here all divs are colored red.

div p { color: green }
p { color: red }

Here div p wins because it’s more specific so all div p will be green.