CSS选择器的继承和优先级

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /**
            继承：
            在css中，祖先元素上的样式，也会被它的后代元素所继承
            利用继承，可以将一些基本的样式设置给祖先元素，
            这样所有的后代元素将会自动继承这些样式
            
            但是并不是所有的样式都会被子元素继承，
            比如，背景相关的样式都不会被继承
            
    
            选择器优先级：
            当使用不同的选择器，选中同一个元素时并且设置相同的样式时
            样式之间产生了冲突，最终的样式取决于选择器的优先级（权重）
            规则：
            内联样式：1000
            id选择器：100
            类和伪类：10
            元素：1
            通配*：0
            继承的样式：没有优先级
            
            当选择器中包含多种选择器时，需要将多种选择器的优先级相加再比较
            需要注意的是,选择器优先级不会超过他的做大的数量级
            如果选择器的优先级一样，则使用靠后的样式
            
            并集选择器的优先级是单独计算
            div , p , #p1 , .hello{}
            
            可以在样式的最后，添加一个！important
            此时样式的优先级最高，甚至超过内联样式
            尽量避免使用该方式
        */
            *{
                font-size: 50px;
            }
            p{
                font-size: 50px;
                background-color: salmon;
            }
            #p2{
                background-color: red;
            }
            .p1{
                background-color: greenyellow;
            }
            p#p2{
                background-color: #ADFF2F;
            }
            .p3{
                background-color: green;
            }
        </style>
    </head>
    <body>
        
        <p id="p2" class="p1 p3" style="background-color: skyblue;">
            这是一个段落
            <span>p中的span</span>
        </p>
        
        
        
    </body>
</html>
CSS选择器的继承和优先级

推荐阅读更多精彩内容
