層疊樣式表/模式

待辦事項
警告，此頁面未從 TOC 連結。

介紹 (X)HTML 文件樹

(X)HTML 文件的文件層級結構可以比作家譜。我們可以透過一個基本的例子來觀察這一點。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <body>
    <div id="title">
      <img />
      <p>   </p>
    </div>
  </body>
</html>

如果我們以不同的方式展示上面的例子，元素之間的關係和層級結構就會變得一目瞭然。

       html
        |
       body
        |
       div
        /\
       /  \
    img    p

在描述這個例子中的樹/層級結構時，我們可以說 body 元素是 html 元素的子元素，就像 div 是 body 的子元素一樣，而 img 和 p 都是 div 的子元素，並且彼此是兄弟元素。html 是 div 的祖先，因為 div 是間接從 html 派生出來的。

在層級結構中定位元素

假設我們要建立一個像 p {color:blue;} 這樣的規則。這將導致整個文件中的每個段落都顯示為藍色。但是，如果我們想要對受影響的元素更加“挑剔”，我們可以定義應用此規則的上下文。如果只有 div 元素中的段落應該顯示為藍色，則規則需要是 div p {color:blue;}。現在，假設只有在一個由特定 ID 定義的 div 元素中的段落應該顯示為藍色。那麼，我們可以透過使用 div#title p {color:blue;} 來細化我們的目標區域。