DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 深入了解CSS的繼承性及其應用2
深入了解CSS的繼承性及其應用2
編輯:CSS詳解     
五、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=”id<?XML:namespace prefix = st1 />316”>深入探討<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元素的值看起來要比多數普通規則的權值大。所以我們可以看出內聯樣式具有高的特性值,具體的例子我們就不舉了,大家可以自己試試。

  六、人為定義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的規則繼承的值也是如此,在匹配重要規則的元素之外,重要性也會隨之消失,這點是需要我們特別注意的!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved