CSS樣式----CSS樣式表的繼承性和層疊性（圖文詳解）

本文最初於2017-07-29發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一塊兒入門和進階前端。

如下是正文。

本文重點

• CSS的繼承性
• CSS的層疊性
  • 計算權重
  • 權重問題大總結
  • CSS樣式表的衝突的總結
• 權重問題深刻
  • 同一個標籤，攜帶了多個類名
  • !important標記

CSS的繼承性

咱們來看下面這樣的代碼，來引入繼承性：

上方代碼中，咱們給div標籤增長紅色屬性，卻發現，div裏的每個子標籤<p>也增長了紅色屬性。因而咱們獲得這樣的結論：

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

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

可是呢，若是再給上方的代碼加一條屬性：

上圖中，咱們給div加了一個border，可是發現只有div具有了border屬性，而p標籤卻沒有border屬性。因而咱們能夠得出結論：

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

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

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

CSS的層疊性

不少公司若是要筆試，那麼必定會考層疊性。

層疊性：計算權重

層疊性：就是css處理衝突的能力。 全部的權重計算，沒有任何兼容問題！

CSS像藝術家同樣優雅，像工程師同樣嚴謹。

咱們來看一個例子，就知道什麼叫層疊性了。

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

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

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

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

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

層疊性舉例

舉例1：計算權重

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

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

舉例2：權重相同時

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

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

如今我要讓一個列表實現上面的這種樣式：第一個li爲紅色，剩下的li所有爲藍色。

若是寫成下面這種代碼是沒法實現的：

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

正確的作法是：（很是重要）

上圖中，第二個樣式比第一個樣式的權重要大。所以在實戰中能夠實現這種效果：全部人當中，讓某一我的爲紅，讓其餘全部人爲藍。

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

就拿上方代碼來舉例，爲了達到這種效果，即爲了防止權重不夠，比較穩妥的作法是：把第二個樣式表照着第一個樣式表來寫，在此基礎上，給第二個樣式表再加一個權重。

上面這個例子很具備實戰性。

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

這裏須要聲明一點：

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

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

另外：若是你們都是0，那麼有一個就近原則：誰描述的近，聽誰的。舉例以下：

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

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

經過列舉上面幾個例子，咱們對權重問題作一個總結。

上面這個圖很是重要，咱們針對這個圖作一個文字描述：

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

CSS樣式表的衝突的總結

• 一、對於相同的選擇器，其樣式表排序：行級樣式 > 內嵌樣式表 > 外部樣式表（就近原則）
• 二、對於相同方式的樣式表，其選擇器排序：ID選擇器 > 類選擇器 > 標籤選擇器
• 三、外部樣式表的ID選擇器 > 內嵌樣式表的標籤選擇器

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

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

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

• 一、對同一個標籤，若是用到了多個相同的內嵌樣式表，它的優先級：定義的CSS樣式表中，誰最近，就用誰。
• 二、對於同一個標籤，若是引用了多個相同的外部樣式表，它的優先級：html文件中，引用樣式表的位置越近，就用誰。

例如：

題目演示

CSS的層疊性講完了，咱們來作幾個題目吧。

題目1

題目2

題目3

題目4

權重問題深刻

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

這裏須要補充兩種衝突的狀況：

• 一、對同一個標籤，若是用到了了多個相同的內嵌樣式表，它的優先級： 定義的樣式表中，誰最近，就用誰。
• 二、對於同一個標籤，若是引用了多個相同的外部樣式表，它的優先級：html文件中，引用樣式表的位置越近，就用誰。

例如：（就近原則）

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

!important標記

來看個很簡單的例子：

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

若是咱們想讓文字的顏色顯示爲綠色，只須要給標籤選擇器的加一個!important標記，此時其權重爲無窮大。以下：

important是英語裏面的「重要的」的意思。咱們能夠經過以下語法：

k:v !important;

來給一個屬性提升權重。這個屬性的權重就是無窮大。

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

正確的語法：

font-size:60px !important;

錯誤的語法：

font-size:60px; !important;    不能把!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寫的很亂。
如今，咱們知道層疊性能比較不少東西：
選擇器的寫法權重，誰離的近，誰寫在下面。

知識回顧

咱們把以上內容和上一篇文章作一個簡單的知識回顧。

CSS屬性

css屬性，面試的時候會有筆試，筆試沒有智能感應的。

加粗，傾斜，下劃線：

font-weight:bold;
font-style:italic;
text-decoration:underline;

背景顏色、前景色：

background-color:red;
color:red;

class和id的區別

class用於css的，id用於js的。

1）class頁面上能夠重複。id頁面上惟一，不能重複。
2）一個標籤能夠有多個class，用空格隔開。可是id只能有id。

各類選擇器(瀏覽器兼容性)

IE6層面兼容的選擇器： 標籤選擇器、id選擇器、類選擇器、後代、交集選擇器、並集選擇器、通配符。以下：

p
#box
.spec
div p
div.spec
div,p
*

IE7可以兼容的：兒子選擇器、下一個兄弟選擇器。以下：

div>p
h3+p

IE8可以兼容的：

ul li:first-child
ul li:last-child

css兩個性質

• 繼承性：好的事兒。繼承從上到下，哪些能？哪些不能？

• 層疊性：衝突，多個選擇器描述了同一個屬性，聽誰的？

再看幾個題目：

權重問題大總結，最後有個例子，比較難，暫時略掉。

個人公衆號

想學習代碼以外的軟技能？不妨關注個人微信公衆號：生命團隊（id：vitateam）。

掃一掃，你將發現另外一個全新的世界，而這將是一場美麗的意外：