CSS3 priority order for browsers

问题

What's the priority order on a CSS3 style sheet?

I mean, imagine that we have different settings for the same content inside the CSS. Which one will the browser choose and apply?

Is this something related to the position of the code inside the CSS? I mean from top to bottom?

回答1:

The order that the Browser loads the CSS tags in will determine which value is taken.

So, if you put the CSS files at the end of your document, then they will be applies in order, one by one, overwriting any existing duplicate selectors that they come across.

Example:

#myDiv { 
background-color: blue;
width: 300px;
height: 200px;
}


#myDiv { 
background-color: red;
width: 300px;
height: 200px;
}

<div id="myDiv">
Demo
</div>

回答2:

Yes Css is work top to bottom like:-

if you give class on 10 line number and other same class with some change to 15 line number it will take 15 line number code.

Like:-

line 10:- .class{background-color: #ffffff; font-size: 14px; font-family: 'Open Sans', sans-serif;}

line 15:- .class{background-color: #0000; font-size: 14px; font-family: 'Open Sans', sans-serif;} - it will take this.

来源：https://stackoverflow.com/questions/42315028/css3-priority-order-for-browsers