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

繼承性

面向對象語言都會存在繼承的概念，在面向對象語言中，繼承的特點：繼承了父類的屬性和方法。那麽我們現在主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。

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

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

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

層疊性

層疊性： 權重的標簽覆蓋掉了權重小的標簽，說白了 ，就是被幹掉了
權重： 誰的權重大，瀏覽器就會顯示誰的屬性

誰的權重大？ 非常簡單就是小學的數數。

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

/*1  0  0 */顯示紅色
#box{


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

是不是感覺明白了呢？好的，再給大家加深點難度。

1     <div id=‘box1‘ class="wrap1">
2         <div id="box2" class="wrap2">
3             <div id="box3" class="wrap3">
4                 <
 
p>再來猜猜我是什麽顏色？</p>
5             </div>
6         </div>
7     </div>

        #box1 #box2 p{
            color: yellow;
        }
        
        #box2 .wrap3 p{
            color: red;
        }
        
        div div #box3 p{
            color: purple;
        }
        
        
        div.wrap1 div.wrap2 div.wrap3 p
 
{
            color: blue;
        }

好的。那麽上面的這個案例大家是否懂了呢？那麽接下來我們繼續看案例

還是上面那個html結構，如果我設置以下css，會顯示什麽顏色呢。

1         #box2 .wrap3 p{
2             color: yellow;
3         }
4         
5         #box1 .wrap2 p{
6             color: red;
7         }

答案是紅色的。結論：當權重一樣的時候 是以後來設置的屬性為準，前提必須權重一樣 。‘後來者居上 ’。

Good,我們繼續看下面的css，你來猜以下此時字什麽顏色？

#box1 #box2 .wrap3{
    color: red;
}
        
#box2 .wrap3 p{
    color: green;
}

答案是綠色。哈哈，是不是感覺快懵掉了。其實大家只要記住這點特性就可以。第一條css設置的屬性值，是通過繼承性設置成的紅色，那麽繼承來的屬性，它的權重為0。它沒有資格跟我們下面選中的標簽對比。

那大家猜想一下如果都是被繼承來的屬性，那麽字會顯示什麽顏色呢？

#box1 #box2 .wrap3{
    color: red;
}
.wrap1 #box2{
    color: green;
}

小案例證明：權重都是0:那麽就是"就近原則" ： 誰描述的近，就顯示誰的屬性。所謂描述的近，就是選中到最內層的距離越近。

小總結一下：

總結：
1.先看標簽元素有沒有被選中，如果選中了，就數數 （id,class,標簽的數量） 誰的權重大 就顯示誰的屬性。權重一樣大，後來者居上
2.如果沒有被選中標簽元素，權重為0。
如果屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性

07-css的繼承性和層疊性