css層疊、優先級和繼承

層疊

當聲明衝突時，層疊會依據三種條件解決衝突。
(1) 樣式表的來源：樣式是從哪裏來的，包括你的樣式和瀏覽器默認樣式等。
(2) 選擇器優先級：哪些選擇器比另外一些選擇器更重要。
(3) 源碼順序：樣式在樣式表裏的聲明順序。

選擇器優先級規則

❑若是選擇器的ID數量更多，則它會勝出（即它更明確）。
❑ 若是ID數量一致，那麼擁有最多類的選擇器勝出。
❑ 若是以上兩次比較都一致，那麼擁有最多標籤名的選擇器勝出。

僞類選擇器（如：hover）和屬性選擇器（如[type="input"]）與一個類選擇器的優先級相同。通用選擇器（＊）和組合器（>、+、~）對優先級沒有影響。

兩條經驗法則

(1) 在選擇器中不要使用ID。就算只用一個ID，也會大幅提高優先級。當須要覆蓋這個選擇器時，一般找不到另外一個有意義的ID，因而就會複製原來的選擇器，而後加上另外一個類，讓它區別於想要覆蓋的選擇器。
(2) 不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就須要再加上一個！important，並且依然要處理優先級的問題。

繼承

若是一個元素的某個屬性沒有層疊值，則可能會繼承某個祖先元素的值。
但不是全部的屬性都能被繼承。默認狀況下，只有特定的一些屬性能被繼承，一般是咱們但願被繼承的那些。它們主要是跟文本相關的屬性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing。還有一些其餘的屬性也能夠被繼承，好比列表屬性：list-style、list-style-type、list-style-position以及list-style-image。表格的邊框屬性border-collapse和border-spacing也能被繼承。

繼承屬性會順序傳遞給後代元素，直到它被層疊值覆蓋。

特殊值

使用inherit關鍵字

用inherit關鍵字。能夠用它來覆蓋另外一個值，這樣該元素就會繼承其父元素的值。

使用initial關鍵字

當一個屬性沒有層疊值且不是繼承屬性時就會使用屬性的初始值，固然咱們也能夠設置initial關鍵字來顯式使用初始值。css每一個屬性都有初始值，它和瀏覽器相關，不一樣瀏覽器可能會有差別，可是要記住它不屬於瀏覽器默認樣式表（用戶代理表）

簡寫屬性

不少屬性均可以簡寫，如font,background,margin,padding等。
大多數簡寫屬性能夠省略一些值，只指定咱們關注的值。可是要知道，這樣作仍然會設置省略的值，即它們會被隱式地設置爲初始值(不是繼承值)。這會默默覆蓋在其餘地方定義的樣式。