CSS样式优先级

1.先看选择器是不是作用在目标标签上，选中非目标元素的情况下，离目标越近者优先

例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>样式应用于非目标标签时</title>
        <style>
            div p{color: red};
            #box{color: blue}//权重高   但离目标标签远
        </style>
    </head>
    <body>
        <!-- 选中非目标元素的情况下，离目标越近者优先 -->
        <div id="box">
          <p>
            <span>神来之笔</span>
          </p>
        </div>
    </body>
</html>

2.都是作用在目标标签就看权重

权重： 一个!important+10000，一个行内样式+1000，一个id选择器+100，一个属性选择器、类或者伪类选择器+10，一个元素选择器或者伪元素+1，继承、*（通配符选择器）+0 。

附:（最终权重值是相当于每个属性而言的）

3.都是作用在目标标签并且权重相同就看谁离得近

例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>权重相等的情况下</title>
        <style>
            /* 权重值：201 */
            #box #box2 p{
                width: 200px;           /* 权重值：201 */
                height: 200px;          /* 权重值：201 */
                background-color: red;          /* 权重值：201 */
            }
            /* 权重值：201,离目标最近 */
            #box #box3 p{
                width: 200px;           /* 权重值：201 */
                height: 200px;          /* 权重值：201 */
                background-color: yellow;           /* 权重值：201 */
            }
        </style>
    </head>
    <body>
        <!-- 同等权重下,靠近目标的优先 -->
        <div id="box" class="boxs">
            <div id="box2" class="boxs2">
                        <div id="box3" class="boxs3">
                            <p></p>
                        </div>
            </div>
        </div>
    </body>
</html>

附：内联样式、外联样式其实优先级相同，如果上面3条都相同就按css规则后写的生效

总结

常用选择器权重优先级： !important > id > class > tag
!important可以提升样式优先级，但不建议使用。如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被应用上!important。例如：background: blue !important;
如果两条样式都使用!important，则权重值高的优先级更高
在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的
样式指向同一元素，权重规则生效，权重大的被应用
样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用
样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用