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.