CSS优先级

1）优先级就近原则，同权重的样式谁离标签内容近谁就优先级高；
2）载入样式以最后载入的定位为准；
3）!important优先级最高；
4）权重计算：
（1）内联，如style=”“——1000，
（2）id，如#content——100，
（3）类、伪类和属性选择器，如.content——10，
（4）标签选择器和伪元素选择器，如div p——1
（5）通配符、子选择器和相邻选择器，如*，>，+——0
前三种规则应该好理解，下面咱们看看这个权重是如何计算的，咱们先看看下面的一个页面代码：

<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>
<div id="content">
    <div id="main-content">
        <h2>CSS简介</h2>
        <p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
        <div class="paragraph">
            <h2 class="first">使用CSS布局的优点</h2>
            <p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
        </div>
    </div>
</div>

猜猜看最终这两个H2的颜色是什么？效果图请戳：priority.html
看效果图我们发现这两个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最终呈现出了红色。
参考：CSS权重的问题:选择器权重值的计算
但是，咱们看下面这张图片发现我们明明是给H2设置了颜色，为什么em标签里的CSS也变成了红色？

对，因为em标签继承了父元素H2的color样式，那如果我们给H2设置一个border，是不是em标签也会继承H2的border样式呢？

咱们发现em标签并没有像咱们想的那样，那什么样的属性子元素可以继承父元素的呢：样式继承