07-css的繼承性和層疊性

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>

View Code

        #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;
        }

View Code

 

好的。那麼上面的這個案例你們是否懂了呢？那麼接下來咱們繼續看案例

仍是上面那個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;
}

View Code

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

 

小總結一下：

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