辈分,这是一个难题,我知道,很多年轻的朋友都和我一样,搞不清这些复杂的关系。不过还好,直系亲属和兄弟姐妹,还是完全分得清楚的。嗯,这样就够用了。

我们页面中的元素会越来越多,在聊这些元素之间相互关系的时候,就需要一些名词进行描述。要不然老说谁挨着谁,谁套着谁,一会儿咱们就都乱了。

那么如何描述它们之间的关系呢?这个和我们日常描述辈分是非常相似的。

被套在某一个元素中的,就都是这个元素的后代。比如如下代码中:

<body>
  <header>
    <h1>这是一个简单的页面结构</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系</a></li>
      </ul>
    </nav>
  </header>
</body>

除去 body,其它的(h1navullia)都在 header 里面,那么刚才小括号里说到的这些元素,就都是 header 的后代元素。

这很好理解吧,反过来,只要套在这个元素外面的,就是这个元素的祖先。比如上面,对于 ul 来说,headerbody 都套在它的外面,这两个就都是 ul 的祖先元素(或者叫父辈元素)。

那么我们再进一步,在这个元素里面(后代元素)的第一层,就是和它紧挨着的那一层,这是它的子元素,也叫直接子元素,说白了就是它儿子,而且是亲儿子。比如 header 的子元素就是 h1nav。而 ullia 并没有紧挨着 header,隔了一辈儿甚至几辈儿,那自然不是儿子而是孙子了(玩笑,所以就都算后代元素么。

反过来说 header 就是 h1nav 的父元素,就是套在外面,而且紧挨着的那个元素,就是父元素。

这种关系用语言描述起来多少会觉得有点拗口,但是简单到就像怎么是父亲、怎么是儿子一样。而且还有有意思的地方,就是每个元素可以拥有多个子元素,但只能有一个父元素(祖先元素当然不限制,毕竟祖宗十九代……

和它拥有相同父元素的,是它的同胞元素(也叫兄弟元素)。所以 h1nav 是亲兄弟;而三个 li 之间也是亲兄弟。但是三个 a 之间不是,你会发现它们不是同一个父亲,而是同一个爷爷。堂兄表兄这不能算,在古代都能结婚的,怎么能是兄弟呢(咦,哪里怪怪的。

还是一图胜千言吧……然而并没有图,我就把上面代码改写一下:

<祖先元素>
  <父元素>
    <兄弟元素>这是一个简单的页面结构</兄弟元素>
    <nav>
      <子元素>
        <后代元素><后代元素 href="#">首页</后代元素></后代元素>
        <后代元素><后代元素 href="#">关于</后代元素></后代元素>
        <后代元素><后代元素 href="#">联系</后代元素></后代元素>
      </子元素>
    </nav>
  </父元素>
</祖先元素>

这是相对于 nav 元素而言的,很容易看懂了吧。记着父亲也算祖先,儿子也算后代(怎么都觉得是废话。

这就是三代以内的直系亲属辈分问题吧,说搞不明白的可以叫家长了(这都搞不明白怎么找家长……晕。

【本章助记卡片:卡片 for 第第二十四章