1）优先级就近原则，同权重的样式谁离标签内容近谁就优先级高； 2）载入样式以最后载入的定位为准； 3）!important优先级最高； 4）权重计算： （1）内联，如style=”“，此时权重为1000，
<div class="text-box" style="{color:'red','font-size':'50px'}" ></div>
（2）id选择器，如#text-box，此时权重为100，
<div id="text-box"></div>
<style>
#text-box{
color:red
font-size:50px
}
</style>
（3）类、伪类、属性选择器，.text-box此时权重为10， 类选择器
<div class="text-box"></div>
<style>
.text-box{
color:red
font-size:50px
}
</style>
伪类选择器
<a> class="text-box"></a>
<style>
a:hover{
background-color: orange;
}
</style>
属性选择器
<input type="xxx">
<input class="c1" type="xxx2">
<style>
input[type='xxx']{
width: 100px;
height: 200px;
}
.c1 [type='xxx2']{
width: 100px;
height: 200px;
}
</style>
（4）标签选择器和伪元素选择器，权重是1，通常最外面的标签，权重越低，每多加一层，权重也随之加一。
标签选择器
<div>
<span>浮游的标签选择器</span>
</div>
<style>
div{
color:red
font-size:50px
}
div span{
color:green
font-size:20px
}
</style>
标签选择器的权重是累加的，div的权重是1，div span的权重是2
伪元素选择器
<p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p>
<style>
p:before {
content:'*';
color:red;
}
p:after{
content: "?";
color:red
font-size: 48px
}
</style>
（5）通配符、子选择器、相邻选择器，权重为0
通配符，权重为0
<p>浮游的通配符选择器</p>
<span>浮游的通配符选择器</span>
<style>
*{
color:red
}
</style>
子选择器，权重为0
<h1>
<strong>浮游的子选择器</strong>
<strong>浮游的子选择器</strong>
</h1>
<style>
h1 > strong {
color:red
}
</style>
相邻选择器，权重为0
<div>
<p>第一个p</p>
<p>第二个p</p>
</div>
<p>第三个p是红色</p>
<p>第四个p</p>
<style>
div+p{
color: red;
}
</style>
<div id="content">
<div id="main-content">
<h2>第一个h2</h2>
<p>CSS层叠样式表</p>
<div class="paragraph">
<h2 class="first">第二个h2</h2>
<p></p>
</div>
</div>
</div>
<style>
//定义了第一个和第二个H2的样式
#content div#main-content h2 {
color: red;
}
//定义了第一个H2的样式
#content #main-content>h2 {
color: blue;
}
//定义了第一个和第二个H2的样式
body #content div[id="main-content"] h2 {
color: green;
}
//定义了第二个H2的样式
#main-content div.paragraph h2 {
color: orange;
}
//定义了第二个H2的样式
#main-content [class="paragraph"] h2 {
color: yellow;
}
//定义了第二个H2的样式
div#main-content div.paragraph h2.first {
color: pink;
}
</style>
结果两个H2都呈现出了红色
第一个特殊性的值=2*100+2*1=202
第二个特殊性的值=2*100+1=201
第三个特殊性的值=1*100+1*10+3*1=113
第四个特殊性的值=1*100+1*10+2*1=112
第五个特殊性的值=1*100+1*10+1*1=111
第六个特殊性的值=1*100+2*10+3*1=123
通过计算发现第一个样式的权重比较大，也就是优先级最高，正好第一个样式同时定义了这两个H2的颜色，所以这两个H2最终呈现出了红色。 但是，我们明明是给H2设置了颜色，为什么em标签里的CSS也变成了红色？ 因为em标签继承了父元素H2的color样式
