CSS 有兩大特性：繼承性和層疊性

繼承性

面向對象語言都會存在繼承的概念。在面向對象語言中，繼承的特點：繼承父類的屬性和方法。

繼承：給父設置一些屬性，子級繼承了父級的該屬性，這就是css中的繼承

有一些屬性是可以繼承下來：color，font-*，text-*，line-*. 主要是文本級的標簽元素

但是像一些盒子元素屬性，定位的元素(浮動，絕對定位，固定定位)不能繼承

層疊性

層疊性：權重大的標簽覆蓋權重小的標簽

權重：誰的權重大，瀏覽器就會顯示誰的屬性，當權重一樣的時候，就以後來設置的屬性為準

誰的權重大？ 非常簡單就是計算數量

計算：id 的數量，class的數量，標簽的數量，順序不能亂

<style type="text/css">
    /*1  0  0 */顯示紅色
    #box{
        color: red; 
    }

    /*0  1  0*/
    .container{
        color: yellow;
    }

    /*0  0  1*/
    p{
        color: purple;
    }
</style>

還有一個"就近原則"，當CSS設置的屬性值是通過繼承設置的，那麽繼承來的屬性，它的權重為0。權重都為0的話，誰描述的近，就顯示誰的屬性。所謂描述的近，就是選中到最內層的距離越近

<style type="text/css">
    #box1 #box2 .wrap3{
        color: red;
    }
    .wrap1 #box2{
        color: green;
    }
</style>


<div id=‘box1‘ class="wrap1">
    <div id="box2" class="wrap2">
        <div id="box3" class="wrap3">
            <p>再來猜猜我是什麽顏色？</p>
        </div>
    </div>
</div>
 

總結：

• 先看標簽元素有沒有被選中，如果選中了，就計算數量(id，class，標簽的數量)，誰的權重大，就顯示誰的屬性，權重一樣大，後來者居上
• 如果沒有選中標簽元素，權重為0，如果屬性是被繼承下來的，權重都是0。權重都是0："就近原則"，誰描述的近，就顯示誰的屬性

!important 的使用
!important：設置權重為無限大
!important 不影響繼承來的權重，只影響選中的元素，不要隨便使用!important，因為使用它會影響頁面的布局

CSS繼承性和層疊性