CSS选择器优先级

关于CSS选择器优先级这个问题，首先，我们要知道在没有设置样式的情况下，
会有浏览器默认样式，例如Chrome浏览器默认字体font-size为12px；
其次子元素会继承父元素的样式。

CSS选择器的优先级分情况讨论

1.在单个选择器直接选中的情况下,如：p {font-size: 20px;}

• 选择器的优先级顺序为：id选择器 > 类（伪类）选择器 > 标签（伪元素）选择器 > 通配符*（兄弟/子元素选择器）> 继承样式 > 浏览器默认样式

2.间接继承的情况下，如下

    <style>
       .grandparent{
           font-size: 30px;
       }
       .parent{
           font-size: 18px;
       }
       /* p {
           font-size: 15px;
       } */
    </style>
    

    <div class="grandparent" style="width: 200px;height: 200px;">
        祖父
        <div class="parent">
            父亲
            <p>子元素</p>
        </div>
    </div>

• 在间接选中的情况下,若子元素没有设置该属性，则会继承离该子元素最近的祖先元素的样式，简而言之，就近原则。
• 当然，如果该子元素设置了该属性，则采用该属性值，直接选中 > 间接继承

3.在多个选择器一起使用时

则比较他们的权重值之和，采用较大的权重的样式， 各选择器的权重值如下：

• ！important的权重无限大（理论上）
• id选择器权重：1000
• 类选择器权重：100
• 标签选择器权重：10
• 通配符权重： 1

以上的数值并非十进制，例如通配符的权重“1”为256

    <style>

       #id {
           background-color: red;
       }

       #id,.first {
           background-color: skyblue;
       }
       
    </style>
    <div id="parent" class="first" style="width: 200px; height: 200px;"></div>

id选择器+类选择器的权重 > id选择器，则该元素为天蓝色。

4.另外，在优先级相同的情况下，写在后面的会覆盖前面的样式

相信看完以上内容，对css选择器优先级的顺序应该可以掌握了。