CSS的繼承特性相關教程

學習過面向對象語言的讀者，對於繼承的概念一定不會陌生。在ＣＳＳ語言中的繼承並沒有像在Ｃ＋＋和Ｊａｖａ等語言中的那麼復雜，下面就ＣＳＳ的繼承特性做一詳細介紹。

簡單的說就將將各個ＨＴＭＬ標記看作一個個容器，其中被包含的小容器會繼承包含它的大容器的風格樣式。本節從頁面各個標記的父子關系出發，來詳細地講解ＣＳＳ的繼承。

一、什麼是ＣＳＳ的繼承特性

所有的ＣＳＳ語句都是基於各個標記之間的繼承關系的，為ｒ更好地理解繼承關系，首先從ＨＴＭＬ文件的組織結構人手，如下例所示，

相應的頁面效果如圖１所示：

圖１　包含多層列表的頁面

可以看到這個頁面中，標題的前兩個文字使用了＜ｅｍ＞（強調）標記，在浏覽器中顯示為斜體。後面使用了列表結構，其中最深的部分使用了三級列表。

這裡著重從“繼承”的角度來考慮各個標記之阃的“樹”型關系。如圖２所示。在這個樹型關系中，處於最上端的＜ｈｔｍｌ＞稱之為＂根（ｒｏｏｔ）＂，它是所有標記的源頭，往下層層包含。在每一個分支中，稱上層標記為其下層標記的“父”標記；相應地，下層標記稱為上層標記的“子”標記。例如＜ｈ１＞標記是＜ｂｏｄｙ＞標記的子標記，同時它也是＜ｅｍ＞的父標記。ｌｏｄｉｄａｎｃｅ．ｃｏｍ

圖２　繼承關系樹型圖

二、ＣＳＳ繼承的運用

通過上一節的講解，已經對各個標記間的父子關系有了認識，下面進一步了解ＣＳＳ繼承的運用。ＣＳＳ繼承指的是子標記會繼承父標記的所有樣式風格，並可以在父標記樣式風格的基礎上再加以修改，產生新的樣式，而子標記的樣式風格完全不會影響父標記。

例如在前面的案例中加入如下ＣＳＳ代碼，即將ｈｌ標記設置為藍色，加上下劃線，並將ｅｍ標記設置為紅色，示例文件位於網頁ＣＳＳ教程資源中“第１章＼１４．ｈｔｍ”。

顯示效果如圖３所示，可以看到其子標記ｅｍ也顯示出下劃線，說明對父標記的設置也對子標記產生效果，而ｅｍ文字顯示為紅色．ｈ１標題中其他文字仍為藍色，說明對子標記的設置不會對其父標記產生作用。

圖３　父子關系示例

ＣＳＳ的繼承貫穿整個個ｃｓｓ設計的始終，每個標記都遵循著ＣＳＳ繼承的概念。可以利用這種巧妙的繼承關系，大大縮減代碼的編寫量，並提高可讀性，尤其是在頁面內容很多且關系
復雜的情況下。

例如，現在如果要嵌套最深的第３級州表的文字顯示為綠色，那麼增加如下樣式設置：

效果將如圖４示，所有列表項目的文字都變成了綠色。要儀使＂ＣＳＳ＂項下的最深的３個項目顯示為綠色，其他項目仍顯示為黑色，該怎麼沒置呢？

圖４　各級列表均變成綠色

一種方法是設置單獨的類別，比如定義一個“．ｇｒｅｅｎ”類別，然後將該類別賦予需要變為綠色的項目，但是這樣設置顯然很麻煩。

可以利用繼承的特性，使用前面介紹的“後代選擇器”。這樣不需要設置性的類別，即可完成同樣的任務，示例文件位於網頁ＣＳＳ教程資源中“第１章＼１５．ｈｔｍ”。

實際上，對上面的選擇器，還可以化簡，比如化簡為：

效果也是完全相同的。最後給讀者出一個選撣題，請讀者思考，如果設置改為：

那麼在最終的效果中，綠色顯示的文字一共有幾行，備選答案為：

（Ａ）　３行

（Ｂ）　６行

（Ｃ）　８行

（Ｄ）　９行

（Ｅ）　１０行

請讀者一定要親自在浏覽器中實驗一下．看一看結果如何，很可能和你想象的不同。如果和判斷的結果不同，再仔細思考一下其中的原因。

以上就是精品學習提供的關於ＣＳＳ的繼承特性的內容，希望能夠帶給您幫助。