css樣式繼承規則詳解
1、總結
一句話總結：繼承而發生樣式衝突時，最近祖先獲勝（最近原則）。
一、繼承中哪些樣式不會被繼承？
多數邊框類屬性，好比象Padding（補白），Margin（邊界），背景和邊框的屬性都是不能繼承的。css
二、表格能繼承父親的樣式麼？
不能html
三、如何給當前設置的樣式添加最高權限？
！important 設置某個規則比其餘的規則更重要瀏覽器
四、繼承發生衝突的時候，什麼樣式得到勝利？
最近祖先網絡
2、CSS3學習筆記-1：CSS樣式繼承
本身在寫css時總會趕上css樣式繼承的問題，好在通常問題不大，但一直也不明白css樣式繼承的規則，最近發現了一篇文章講的不錯，所以轉載過來：app
所謂CSS的繼承是指被包在內部的標籤將擁有外部標籤的樣式性質。繼承特性最典型的應用一般發揮在整個網頁的樣式預設，須要指定爲其它樣式的部份設定在個別元素裏便可。這項特性能夠給網頁設計者提供更理想的發揮空間。但同時繼承也有不少規則，應用的時候容易讓人迷惑框架
CSS的一個主要特徵就是繼承，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。下面舉例說明：post
樣式定義：body{color:red;}學習
應用舉例代碼：<p>CSS的<strong>層疊和繼承</strong>深刻探討</p>spa
這段代碼的應用結果是：「CSS的層疊和繼承深刻探討」這段話是紅顏色的，「層疊和繼承」因爲應用了strong元素，因此是粗體。這很符合製做者的意圖，也是爲何繼承是CSS的一部分的緣由。.net
1.CSS繼承的侷限性
在CSS中，繼承是一種很是天然的行爲，咱們甚至不須要考慮是否可以這樣去作，可是繼承也有其侷限性。
首先，有些屬性是不能繼承的。這沒有任何緣由，只是由於它就是這麼設置的。舉個例子來講：border屬性，你們都知道，border屬性是用來設置元素的邊框的，它就沒有繼承性。以下圖所示，若是繼承了邊框屬性，那麼文檔看起來就會很奇怪，除非採起另外的措施關掉邊框的繼承屬性。
多數邊框類屬性，好比象Padding（補白），Margin（邊界），背景和邊框的屬性都是不能繼承的。
2.繼承中容易引發的錯誤
有時候繼承也會帶來些錯誤，好比說下面這條CSS定義：
Body{color:blue}
在有些瀏覽器中這句定義會使除表格以外的文本變成藍色。從技術上來講，這是不正確的，可是它確實存在。因此咱們常常須要藉助於某些技巧，好比將CSS定義成這樣：
Body,table,th,td{color:blue}
這樣表格內的文字也會變成藍色。
3.多種樣式混合應用
既然有了繼承性，那麼在樣式表中的應用上可能會有些讀者搞不清，多個樣式表同時應用到一個對象上會發生什麼情形呢？先舉個簡單的例子：
樣式定義：.apple{color:red;} H1{color:yellow;}
應用舉例代碼：<H1 CLASS=」apple」>這兒的蘋果好紅啊</H1>
應用舉例效果：由於選擇符H1和.apple都匹配上面的H1元素，那麼到底瀏覽器會應用哪個呢？經過在瀏覽器中觀察，咱們發現這段文字應用了.apple這個樣式，因此它顯示的是紅色。這是由於兩條規則的特殊性不同，CSS規則必須這樣進行處理。
樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：
統計選擇符中的ID屬性個數。
統計選擇符中的CLASS屬性個數。
統計選擇符中的HTML標記名格式。
最後，按正確的順序寫出三個數字，不要加空格或逗號，獲得一個三位數。( 注意，你須要將數字轉換成一個以三個數字結尾的更大的數)。相應於選擇符的最終數字列表能夠很容易肯定較高數字特性凌駕於較低數字的。
如下是一個按特性分類的選擇符的列表：
H1 {color:blue;} 特性值爲：1
P EM {color:purple;} 特性值爲：2
.apple {red;} 特性值爲：10
P.bright {color:yellow;} 特性值爲：11
P.bright EM.dark {color:brown;} 特性值爲：22
#id316 {color:yellow} 特性值爲：100
從上表咱們能夠看出#id316具備更高的特殊性，於是它有更高的權重。當有多個規則都能應用於同一個元素時，權重越高的樣式將被優先採用。
4.CSS繼承的優先級問題
上面咱們討論了CSS的繼承性和特殊性，在特殊性的框架下，被繼承的特性值爲0，這就意味着任何顯示聲明的規則將會覆蓋其繼承樣式。所以，無論一條規則具備多高的權重，若是沒有其餘規則能應用於這個繼承元素，那麼它也只是個被繼承的規則而已，舉例說明。
樣式定義：
BODY {background:black;}
LI {color:gray;}
UL.white {color:white}
應用舉例代碼：
<ul>
<li>舉例列表一</li>
<li>舉例列表二</li>
<li>舉例列表三</li>
<li>舉例列表四</li>
</ul>
有些讀者可能認爲除包含.white類的列表項顯示爲白色外，其他全部的列表項都應該是灰色的。然而狀況並不是如此。
爲何會出現這樣的狀況呢？由於帶選擇符LI的顯式聲明的權值比從UL.white規則那裏繼承過來的權值要大，因此每一個列表項都是灰色的。
可能有些地方不是很好理解，你們多思考一下就會明白，平時在應用樣式表的時候多留意思考一下。
下面咱們再來看一個例子，若給定以下所示的標記，則EM強調文字將會是灰色的，而非黑色，由於EM規則的權值要大於從H1元素繼承來的權值：
樣式定義：
H1#id316 {color:black;} 特性值爲：101
EM {color:gray;} 特性值爲：1
應用舉例代碼：
<H1 ID=」id316」>深刻探討<EM>CSS的繼承性</EM></H1>
這是由於第二條EM規則的特性值（1）要比被繼承的特性值（0）要大，事實上規定H1#id316的原始特性值（101）對其繼承值沒有影響，仍舊爲0。
小技巧：
若是想讓H1始終爲黑色，而EM文字在其餘狀況下紅色，那麼下面的樣式表設置就是一個很好的方法：
H1，H1 EM {color:black;} 特性值爲：1，2
EM {color:red;} 特性值爲：1
給定這個規則後，除在H1元素內的任何EM文字就都是紅色，而H1內的EM文字仍舊爲黑色，因爲其選擇符分組，在第一條規則中就有兩條有效的規則（一條是對H1的，另外一條是對H1 EM的）也就有兩個特性值——每條規則一個。
上面咱們討論了多個樣式規則同時應用於同一對象時，哪一個規則會被最終應用的一些狀況，可能有些細心的讀者會說，那STYLE元素呢？對啊，HTML代碼中能夠直接應用內聯樣式STYLE的嘛。那麼它的特性值如何呢？
回答是這樣的：帶有STYLE的元素在CSS1下其特性值爲100，儘管相似於#ID316這樣的ID選擇符的特性值也爲100，但在實際應用中，STYLE這一權值會更高一些，由於STYLE元素的值看起來要比多數普通規則的權值大。因此咱們能夠看出內聯樣式具備高的特性值，具體的例子咱們就不舉了，你們能夠本身試試。
5.人爲定義CSS繼承優先級
在製做網頁的過程當中，咱們可能想要設置某個規則比其餘的規則更重要，CSS中容許這樣設置，它們被稱爲重要規則（important rule）。這是根據其聲明的方式和它們的天然屬性來命名的。經過在一條規則的分號前插入！important這樣一個短語來標記一條重要規則，好比說：
P.apple {color:#red !important; background:white;}
顏色值#red被標記爲!important，而背景色white未被標記，若是須要二條規則都是重要的話，那麼每條規則都須要標上!important。
正確地放置!important的位置是很重要的，不然整條規則將爲無效。!important老是放在規則聲明的最後，在分號以前。
標記爲!important的規則具備最高的權值，也就是說他沒有具體的特性值，可是比其餘的權值都要大。須要注意的是，雖然製做者定義的樣式比用戶定義的樣式具備更高權值時，但!important規則偏偏相反：重要的用戶定義規則要比製做者定義的樣式具備更高權值，即便是標記爲!important的重要規則也是如此。
看了這麼多文字介紹後，咱們來舉個例子看一下：
樣式定義：
H1 {color:gray !important;}
應用舉例代碼：
<H1 STYLE=」color:black;」>看這兒！</H1>
應用舉例效果:
!important規則會覆蓋內聯STYLE屬性的內容，因此結果文字是灰色的而不是黑色的。
還有最後一種須要考慮的狀況：繼承值老是具備特性值0的特色，即便是從帶有!important的規則繼承的值也是如此，在匹配重要規則的元素以外，重要性也會隨之消失，這點是須要咱們特別注意的！
轉載地址：http://www.360doc.com/content/10/0312/12/495229_18463787.shtml#
3、CSS中的樣式覆蓋原則
規則一：因爲繼承而發生樣式衝突時，最近祖先獲勝（最近原則）。
CSS的繼承機制使得元素能夠從包含它的祖先元素中繼承樣式，考慮下面這種狀況：
<html> <head> <title>rule 1title> <style> body {color:black;} p {color:blue;} style> head> <body> <p>welcome to <strong>gaodayue的網絡日誌strong>p> body> html>
strong分別從body和p中繼承了color屬性，可是因爲p在繼承樹上離strong更近，所以strong中的文字最終繼承p的藍色。
規則二：繼承的樣式和直接指定的樣式衝突時，直接指定的樣式獲勝（最直接原則）。
在上面的例子中，假如還指定了strong元素的樣式，如：
strong {color:red;}
那麼根據規則二，strong中的文字最終顯示爲紅色。
規則三：直接指定的樣式發生衝突時，樣式權值高者獲勝。
樣式的權值取決於樣式的選擇器，權值定義以下表。
css選擇器 權值
標籤選擇器 1
類選擇器 10
ID選擇器 100
內聯樣式 1000
僞元素(:first-child等) 1
僞類(:link等) 10
能夠看到，內聯樣式的權值>>ID選擇器>>類選擇器>>標籤選擇器，除此之外，後代選擇器的權值爲每項權值之和，好比」#nav .current a」的權值爲100 + 10 + 1 = 111。
規則四：樣式權值相同時，後者獲勝。
考慮下面這種狀況
.byline a {color:red;}p .email {color:blue;}
「.byline a」與」p .email」都直接指定了上面的a元素，且權值都爲11，根據規則四，最終顯示藍色。
因爲樣式表能夠是外部的，也能夠是內部的，規則四提醒咱們要注意外部樣式表引入的順序（及元素的順序），以及外部樣式表與內部樣式表的出現位置。通常來講，內部樣式表出如今全部外部樣式表的引入以後，通常是在以前。
規則五：!important的樣式屬性不被覆蓋。
!important 能夠看作是萬不得已的時候，打破上述四個規則的」金手指」。若是你必定要採用某個樣式屬性，而不讓它被覆蓋的，能夠在屬性值後加上!important，以規則四的例子爲例，」.byline a {color:red !important;}」能夠強行使連接顯示紅色。大多數狀況下均可以經過其餘方式來控制樣式的覆蓋，不能濫用!important。