同一元素被应用不同的css样式后的结果

一.结论：

 css样式的优先级，是通过权值和先后顺序来确定的。就是我们平常说的内联样式>行内样式>外部样式

1.在权值相同的情况下，后面的样式覆盖前面的样式

2.权值高的样式会覆盖权值低的样式

二.权值：

1.标签的权值为1，类选择符的权值为10，id选择符的权值最高为100.

2.后代元素、子元素等权值可相加

3.权值相较，高者拥有匹配样式的权力

例1：
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ \#footer .note p{color:yellow;} /*权值为100+10+1=111*/

例2：
<link href="res/css/test1.css" type="text/css" rel="stylesheet"> <link href="res/css/test2.css" type="text/css" rel="stylesheet">

/*test1*/ body { background: yellow; } body { background: blue; }

/*test2*/ body { background: black; } body { background: red; }
body最终会采用最后一个样式。

来源1
来源2