階層(Hierarchy)

串接式樣式表(CSS)本身並無階層實體，它必須依附於超文件標記語言(HTML)的元素標籤(Element)來產生所謂的「階層」；我們換個角度來說，CSS 的「階層」是由我們在 HTML 文件中，依據我們自己所需的 HTML 元素標籤而自動被建立的。

階層對於串接式樣式表而言是基本與重要的一個概念，因為許多的選取器(Selector)是靠這種關係來選取的。而像這樣的階層結構也順帶衍生出——「親子關係」。

親子關係(Parent-Child Relationship)

我們使用上述的圖片來簡單說明一下：

• div#styleA 與 div#styleB 標籤兩者之間屬於「兄弟元素」(同胞元素)。
• 兩個 li 標籤一樣同屬於「兄弟元素」。
• 兩個 li 標籤的「父元素」為 ul 標籤。
• 兩個 li 標籤的「親代元素」有 ul 標籤、div#styleA 標籤及 body 標籤。
• div#styleA 標籤的「子元素」為 ul 標籤。
• div#styleA 標籤的「子代元素」有 ul 標籤與兩個 li 標籤。

繼承(Inheritance)

「繼承」在樣式表中，是蠻重要的一個機制，這樣的機制是將某些樣式(Style)的性質特性傳給它的「子代元素」。例如，color 這個樣式屬性，在設定好之後，它就會將這個「性質」傳承給它的子代。

「繼承」顧名思義，它不具有「可逆性」；只有它的子代能繼承，而無法繼承給親代。

文章分類