层叠样式表/模式

待办事项
警告，此页面未从 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;} 来细化我们的目标区域。