css优先级
一、什么是CSS优先级?
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
二、CSS优先级规则
1、每个具有style=“”，权重为1000
2、每个ID选择符(#someid)，权重为100
3、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加权重为10
4、每个元素或伪元素(:firstchild)等，加权重为1
5、其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。
6、出现！important 权重最高！！！
7、
1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）
三、具体例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css" media="screen">
#text{color: red}
.text{color: blue;}
</style>
</head>
<body>
<div id="text" class="txt">
<p>
<span>测试文字</span>
</p>
</div>
</body>
</html>
测试结果为 red
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css" media="screen">
div.txt p span{color: orange}
.txt p span{color: red}
.txt1 span{color: blue}
</style>
</head>
<body>
<div id="text" class="txt">
<p class="txt1">
<span>测试文字</span>
</p>
</div>
</body>
</html>
测试结果为 orange
