辈分，这是一个难题，我知道，很多年轻的朋友都和我一样，搞不清这些复杂的关系。不过还好，直系亲属和兄弟姐妹，还是完全分得清楚的。嗯，这样就够用了。
我们页面中的元素会越来越多，在聊这些元素之间相互关系的时候，就需要一些名词进行描述。要不然老说谁挨着谁，谁套着谁，一会儿咱们就都乱了。
那么如何描述它们之间的关系呢？这个和我们日常描述辈分是非常相似的。
被套在某一个元素中的，就都是这个元素的后代。比如如下代码中：
<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，其它的（h1、nav、ul、li、a）都在 header 里面，那么刚才小括号里说到的这些元素，就都是 header 的后代元素。
这很好理解吧，反过来，只要套在这个元素外面的，就是这个元素的祖先。比如上面，对于 ul 来说，header 和 body 都套在它的外面，这两个就都是 ul 的祖先元素（或者叫父辈元素）。
那么我们再进一步，在这个元素里面（后代元素）的第一层，就是和它紧挨着的那一层，这是它的子元素，也叫直接子元素，说白了就是它儿子，而且是亲儿子。比如 header 的子元素就是 h1 和 nav。而 ul、li、a 并没有紧挨着 header，隔了一辈儿甚至几辈儿，那自然不是儿子而是孙子了（玩笑，所以就都算后代元素么。
反过来说 header 就是 h1 和 nav 的父元素，就是套在外面，而且紧挨着的那个元素，就是父元素。
这种关系用语言描述起来多少会觉得有点拗口，但是简单到就像怎么是父亲、怎么是儿子一样。而且还有有意思的地方，就是每个元素可以拥有多个子元素，但只能有一个父元素（祖先元素当然不限制，毕竟祖宗十九代……
和它拥有相同父元素的，是它的同胞元素（也叫兄弟元素）。所以 h1 和 nav 是亲兄弟；而三个 li 之间也是亲兄弟。但是三个 a 之间不是，你会发现它们不是同一个父亲，而是同一个爷爷。堂兄表兄这不能算，在古代都能结婚的，怎么能是兄弟呢（咦，哪里怪怪的。
还是一图胜千言吧……然而并没有图，我就把上面代码改写一下：
<祖先元素><父元素><兄弟元素>这是一个简单的页面结构</兄弟元素><nav><子元素><后代元素><后代元素 href="#">首页</后代元素></后代元素><后代元素><后代元素 href="#">关于</后代元素></后代元素><后代元素><后代元素 href="#">联系</后代元素></后代元素></子元素></nav></父元素></祖先元素>这是相对于 nav 元素而言的，很容易看懂了吧。记着父亲也算祖先，儿子也算后代（怎么都觉得是废话。
这就是三代以内的直系亲属辈分问题吧，说搞不明白的可以叫家长了（这都搞不明白怎么找家长……晕。
暂无评论内容