PIZn

      这2天来一直在忙碌，没时间写点儿小文章。今天好不容易挤了挤点儿出来，写啥好？还是从最简单的开始吧，先对 Document Tree 做下小小的总结，为接下来的 Css inheritance 做铺垫。

      Document Tree 是指 (X)HTML 里面的元素（例如：html、body、div、ul、li等）所组成的关系树。所有的 (X)HTML 文档都是树，而这些树可以这样来理解，从家庭的角度——Document Tree is just like  a family tree.

      好吧，我们看下这棵树具体是长啥样子的（如右图所示）：

      下面解释下几个名词：

      祖先（ancestor）：

      以一个家庭来做比喻吧，我们的祖先是我们的爸爸、爷爷等老一辈。从 (X)HTML 里面看呢，例如右图的 body 节点，其祖先为 html ； ul 节点，其祖先为 body 、html 。哈哈，很简单吧，就这样。

      后代（descendant）：

      有祖先之称，就有后代了。head 的后代是 title ，ul 的后代是 li。

      父母节点（parent）：

      父母节点指的是改元素的上级节点，而根节点是没有父母节点的。

      孩子节点（child）：

      哈哈，与父母节点相呼应。

      兄弟节点（sibling）：

      兄弟节点指的是具有同一个父母节点的元素组，例如 li（左） 元素具有兄弟节点 li（右）； head 元素具有兄弟节点 body 等。

      在 DOM（Document Object Model）中，又将兄弟节点分为前驱兄弟（previoousSibling）和后继兄弟（nextSibling）。

      以上就是 Document Tree 的基本内容，在一个 (X)HTML 文档里面，基本都拥有着这样一颗树。一棵健壮的树，可以让你的页面文档通过 w3c 标准校验，在构设界面（XHTML）的同时，也为后面的行为（利用Javascript DOM 操作）做下了铺垫。