DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS層疊與繼承用法手冊(2)
CSS層疊與繼承用法手冊(2)
編輯:CSS詳解     

二、CSS繼承

所謂繼承,就是父元素的規則也會適用於子元素。比如給body設置為color:Red;那麼他內部的元素如果沒有其他的規則設置,也都會變成紅色。繼承得來的規則沒有特殊性。下面看一個簡單的例子:

ExampleSourceCode

  1. <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
  2. <head>
  3. <title>CSSCascadetitle>
  4. <styletypestyletype="text/CSS">
  5. *{color:Blue;}
  6. div{color:Black;}
  7. .imp{color:Red!important;}
  8. #content{color:Green;}
  9. style>
  10. head>
  11. <body>
  12. <div>Hello<span>div-CSS.Netspan>div>
  13. <dividdivid="content">
  14. <pclasspclass="imp">Titlep>
  15. ContentGoesHere.
  16. div>
  17. body>
  18. Html>

注意,第一行的CSS並沒有繼承div的黑色,這是因為通配符的緣故。通配符的特殊性雖然是全0,但是還是比繼承的特殊性要高。第二行展示了!important標記的作用。
另外,一些明顯不應該繼承的屬性,比如border,margin,padding之類的是不會被繼承的,具體可以參考CSS手冊。

三、其他

雖然有4個整數來表示一個特殊性,仍然有可能出現兩條沖突的規則的特殊性完全一致的情況,此時就按照CSS規則出現的順序來確定,在樣式表中最後一個出現的規則勝出。一般不會出現這樣的情況,只有一個情況例外,考慮如下樣式表:

ExampleSourceCode

  1. :active{color:Red;}
  2. :hover{color:Blue;}
  3. :visited{color:Purple;}
  4. :link{color:Green;}

這樣頁面中的鏈接永遠也不會顯示紅色和藍色,因為一個鏈接要麼被訪問過,要麼沒有被訪問過。而這兩條規則在最後,因此總會勝出。如果改成這樣:

ExampleSourceCode

  1. :link{color:Green;}
  2. :visited{color:Purple;}
  3. :hover{color:Blue;}
  4. :active{color:Red;}

就能實現鼠標懸停和點擊的瞬間變色的效果。這樣的順序的首字母正好連成“LoVeHA”,這樣的順序被約定俗成的叫做LoveHa規則。特殊性規則從理論上講比較抽象和難懂,但在實踐中,只要樣式表是設計良好的,並不會有太多這方面的困擾,因此本文也不再做深究,更多的技術請參考div-CSS.Net的文章更新!

 

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