14.3. HTML文档树(元素的包含与排列关系)

HTML文档中的元素是分层次的,我们可以把这种层次归纳为几种关系:包含(嵌套、父子、继承)关系与并列(邻居、相邻、兄弟)关系

文档的层次也被称为文档树

html文档树

HTML元素包含(嵌套、父子、继承)关系

<body>
    <div>
        <p>
            <span>www.dreamdu.com</span>
        </p>
    </div>
</body>

上面的事例是一个典型的包含关系

  • body标签是最外层元素,可以理解为"祖父"
  • div标签在body标签中,所以它是body的孩子,我们把div叫"父亲",divbody的直接包含
  • p标签在div标签中,所以它是div的孩子,我们把p叫"儿子",pdiv的直接包含
  • span标签在p标签中,所以它是p的孩子,我们把span叫"孙子":)
  • pdiv的直接包含,而pbody的间接包含
  • spanp的直接包含,而spanbody的间接包含

我们也将HTML元素的包含关系称为嵌套、父子或继承关系

引用网址:http://www.dreamdu.com/css/html_hiberarchy/

HTML元素相邻(邻居、并列、兄弟)关系

<div>www</div>
<p>dreamdu</p>
<span>com</span>

上面的事例是一个典型的相邻关系

  • divp是直接相邻
  • pspan是直接相邻
  • divspan是普通相邻

一个HTML文档往往是包含关系与相邻关系的组合

<body>
    <div>
        <p>
            <span>www</span>
        </p>
        <strong>dreamdu</strong>
        <em>com</em>
    </div>
</body>
  • pstrong是并列关系,它们有同一个父亲div
  • pstrong是直接相邻的关系
  • pem是并列关系,它们有同一个父亲div
  • pem是普通相邻的关系

了解嵌套与并列关系对于理解CSS组合选择符有很大帮助



  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都