CSS樣式表的繼承性和層疊性

 

繼承性

有一些屬性，當給自己設定的時候，自己的後代都繼承上了，這個就是繼承性。

如下,我們給div標籤增加紅色屬性，卻發現，div裡的每一個子標籤<p>也增加了紅色屬性。

 

繼承性是從自己開始，直到最小的元素。

但是呢，如果再給上方的程式碼加一條屬性：

上圖中，我們給div加了一個border，但是發現只有div具備了border屬性，而p標籤卻沒有border屬性。於是我們可以得出結論：

• 關於文字樣式的屬性，都具有繼承性。這些屬性包括：color、 text-開頭的、line-開頭的、font-開頭的。

• 關於盒子、定位、佈局的屬性，都不能繼承。

以後當我們談到css有哪些特性的時候，我們要首先想到繼承性。而且，要知道哪些屬性具有繼承性、哪些屬性沒有繼承性。

層疊性

層疊性：就是css處理衝突的能力（權重的計算）所有的權重計算，沒有任何相容問題！

來看一個例子：

上圖中，三種選擇器同時給P標籤增加顏色的屬性，但是，文字最終顯示的是藍色，這個時候，就出現了層疊性的情況。

當多個選擇器，選擇上了某個元素的時候，要按照如下順序統計權重：

id的數量，類的數量，標籤的數量

因為對於相同方式的樣式表，其選擇器排序的優先順序為：ID選擇器 > 類選擇器 > 標籤選擇器

針對上面這句話，我們接下來舉一些複雜一點的例子。

層疊性舉例

舉例1：計算權重

如上圖所示，統計各個選擇器的數量，優先順序高的勝出。文字的顏色為紅色。

PS：不進位，實際上能進位（奇淫知識點：255個標籤，等於1個類名）但是沒有實戰意義！

舉例2：權重相同時

上圖可以看到，第一個樣式和第二個樣式的權重相同。但第二個樣式的書寫順序靠後，因此以第二個樣式為準（就近原則）。

舉例3：具有實戰性的例子

現在我要讓一個列表實現上面的這種樣式：第一個li為紅色，剩下的li全部為藍色。

如果寫成下面這種程式碼是無法實現的：

無法實現的原因很簡單，計算一下三個選擇器的權重就清楚了，顯然第二個樣式被第一個樣式表覆蓋了。

正確的做法是：（非常重要）

上圖中，第二個樣式比第一個樣式的權重要大。因此在實戰中可以實現這種效果：所有人當中，讓某一個人為紅，讓其他所有人為藍。

這種方式好用是好用，但用好很難。

就拿上方程式碼來舉例，為了達到這種效果，即為了防止權重不夠，比較穩妥的做法是：把第二個樣式表照著第一個樣式表來寫，在此基礎上，給第二個樣式表再加一個權重。上面這個例子很具有實戰性。

舉例4：繼承性造成的影響

這裡需要宣告一點：

如果不能直接選中某個元素，通過繼承性影響的話，那麼權重是0。

為了驗證上面這句話，我們來看看下面這樣的例子：

所以上方顯示綠色。

另外：如果大家都是0，那麼有一個就近原則：誰描述的近，聽誰的。舉例如下：

所以上方顯示藍色。

層疊性：權重計算的問題大總結（非常重要）

層疊性。層疊性是一種能力，就是處理衝突的能力。當不同選擇器，對一個標籤的同一個樣式，有不同的值，聽誰的？這就是衝突。css有著嚴格的處理衝突的機制。

通過列舉上面幾個例子，我們對權重問題做一個總結。

上面這個圖非常重要，我們針對這個圖做一個文字描述：

• 選擇上了，數權重，(id的數量，類的數量，標籤的數量)。如果權重一樣，誰寫在後面聽誰的。
• 沒有選擇上，通過繼承影響的，就近原則，誰描述的近聽誰的。如果描述的一樣近，比如選擇器權重，如果權重再一樣重，誰寫在後面聽誰的。

CSS樣式表的衝突的總結

• 1、對於相同的選擇器（比如同樣都是類選擇器），其樣式表排序：行級樣式 > 內嵌樣式表 > 外部樣式表（就近原則）
• 2、對於相同型別的樣式表（比如同樣都是內部樣式表），其選擇器排序：ID選擇器 > 類選擇器 > 標籤選擇器
• 3、外部樣式表的ID選擇器 > 內嵌樣式表的標籤選擇器

總結：就近原則。ID選擇器優先順序最大。

舉例：如果都是內嵌樣式表，優先順序的順序如下：（ID 選擇器 > 類選擇器 > 標籤選擇器）

另外還有兩個衝突的情況：

• 1、對同一個標籤，如果用到的都是內嵌樣式表，且權重一致，那它的優先順序：定義的CSS樣式表中，誰最近，就用誰。
• 2、對於同一個標籤，如果用到的都是外部樣式表，且權重一致，那它的優先順序：html檔案中，引用樣式表的位置越近，就用誰。

例如：

再舉幾個例子：

權重問題深入

同一個標籤，攜帶了多個類名，有衝突：

這裡需要補充兩種衝突的情況：

• 1、對同一個標籤，如果用到了了多個相同的內嵌樣式表，它的優先順序： 定義的樣式表中，誰最近，就用誰。
• 2、對於同一個標籤，如果引用了多個相同的外部樣式表，它的優先順序：html檔案中，引用樣式表的位置越近，就用誰。

例如：（就近原則）

上圖中，文字顯示的顏色均為紅色。因為這和在標籤中的掛類名的書序無關，只和css的順序有關。

!important標記

來看個很簡單的例子：

上圖中，顯然id選擇器的權重最大，所以文字的顏色是紅色。

如果我們想讓文字的顏色顯示為綠色，只需要給標籤選擇器的加一個!important標記，此時其權重為無窮大。如下：

注意，一定要注意語法的正確性。

正確的語法：font-size:60px !important;

!important標記需要強調如下3點：

（1）!important提升的是一個屬性，而不是一個選擇器

 p{
      color:red !important;    只寫了這一個!important，所以只有字型顏色屬性提升了權重
      font-size: 100px ;       這條屬性沒有寫!important，所以沒有提升權重
  }
 #para1{
      color:blue;
      font-size: 50px;
  }
  .spec{
      color:green;
      font-size: 20px;
  }

所以，綜合來看，字型顏色是red（聽important的）；字號是50px（聽id的）。

（2）!important無法提升繼承的權重，該是0還是0

比如HTML結構：

    <div>
        <p>哈哈哈哈哈哈哈哈</p>
    </div>

有CSS樣式：

    div{
        color:red !important;
    }
    p{
        color:blue;
    }

由於div是通過繼承性來影響文字顏色的，所以!important無法提升它的權重，權重依然是0。

幹不過p標籤，因為p標籤是實實在在選中了，所以字是藍色的（以p為準）。

(3)!important不影響就近原則

如果大家都是繼承來的，按理說應該按照“就近原則”，那麼important能否影響就近原則呢？
答案是：不影響。遠的，永遠是遠的。不能給遠的寫一個important，幹掉近的。

為了驗證這個問題，我們可以搞兩層具有繼承性的標籤，然後給外層標籤加一個!important，最終看看就近原則有沒有被打破。舉例如下：

PS：! important做站的時候，不允許使用。因為會讓css寫的很亂。
現在，我們知道層疊效能比較很多東西：
選擇器的寫法權重，誰離的近，誰寫在下面。