css优先级

1）优先级就近原则，同权重的样式谁离标签内容近谁就优先级高；
2）载入样式以最后载入的定位为准；
3）!important优先级最高；
4）权重计算：
（1）内联，如style=”“，此时权重为1000，

<div class="text-box" style="{color:'red','font-size':'50px'}" ></div>

（2）id选择器，如#text-box，此时权重为100，

<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

<span>浮游的通配符选择器</span>
<style>
   *{
       color:red
   }
</style>

子选择器，权重为0

    <strong>浮游的子选择器</strong>
    <strong>浮游的子选择器</strong>
</h1>
<style>
h1 > strong {
    color:red
}
</style>

相邻选择器，权重为0

   <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都呈现出了红色
第一个特殊性的值=2100+21=202
第二个特殊性的值=2100+1=201
第三个特殊性的值=1100+110+31=113
第四个特殊性的值=1100+110+21=112
第五个特殊性的值=1100+110+11=111
第六个特殊性的值=1100+210+3*1=123

通过计算发现第一个样式的权重比较大，也就是优先级最高，正好第一个样式同时定义了这两个H2的颜色，所以这两个H2最终呈现出了红色。
但是，我们明明是给H2设置了颜色，为什么em标签里的CSS也变成了红色？
因为em标签继承了父元素H2的color样式