七、弄清元素间的父子层级关系


当 papa div 只有少量几个并列关系的子元素时，我们很容易弄清楚它们之间的逻辑关系，不至于陷入混乱。类似上一节复习课的例子：


<div id="papa">
    <img id="mypic" src="图片URL" alt="" />
    <div id="player"><!-- 播放器代码 --></div>
    <div id="mytext">文本</div>
</div>


像这样简单的并列子元素，一张图片、一个播放器div、一个文本div，确实简洁明了，不易搞错。但现在，播放器的代码我们要进一步完善，id="player" 的 div 就得拥有自己的诸多子元素甚至是孙元素，例如它需要有按钮、进度条和进度百分比显示：


<div id="papa">
    <img id="mypic" src="图片URL" alt="" />
    <div id="player">
        <input id="btnplay" type="button" value="播放" />
        <input id="slider" type="range" min="0" max="100" value="0" />
        <span id="per">0%</span>
    </div>
    <div id="mytext">文本</div>
</div>


按钮、进度条和进度百分比显示盒子现在已经安置到了播放器的div，从元素层级的逻辑关系上讲，它们是 player 的子元素，所以 player div 通过自己的起始符 <div ...> 和收尾符 </div> 将它们全部包裹起来；而，如我们已经知道，player 是 papa 的子元素，那么，对 papa 而言，子元素的子元素就是孙子辈的元素（简称孙元素）。这就是元素间的逻辑关系举例，我们没有对之进行全方位描述，相信大家可以举一反三。


元素间的逻辑关系就是元素间的层级关系，形象地说就是：谁是父层、谁是子层、谁是孙层、谁是孙孙层……。明晰元素间的逻辑关系有助于我们在组织代码时减少错误的发生，标签何处起始、何处收尾思路就会非常清晰。当然，我们还需要养成一些好的书写代码的习惯，例如每写一个有起始、收尾的标签代码，先一口气写完它们，再将起始符和收尾符断行分开，然后再缩进写子标签的代码；还有，就像写文章一样，先列好提纲也是个好习惯，做帖子之前先思考好需要哪些子元素，父元素的子元素就好比是文章的提纲，把构思好的子元素这个“提纲”一口气写完，而后再逐一去处理各个子元素的子元素。当然，提纲可以在后续创作中增删，这是小事情。


这里再强调一下层级与缩进问题：元素间的关系应能从缩进的样式看得出层级关系。一个 tab 键的退格或四个空格是父子元素的缩进距离，孙元素对应于爷爷元素应缩进两倍的距离，更多的延伸关系以此类推。


元素间的逻辑关系也可以体现在CSS上。假如我们希望父元素下的 span 标签是一个样式，id="player" 的 div 下的 span 是另一个样式，可以用两个类选择器分别定义，通过HTML代码的 class="选择器" 一一带入各自的样式，麻烦但实实在在且能反复调用。也可以统一指定样式，无需使用class：


#papa > span { /* 样式代码 */ }
#player span { /* 样式代码 */ }


#papa 为什么加入符号“>”呢？“#papa > span”表明，仅针对其下第一层级的子元素 span 做样式定义，第一层级以外还有 span 的话它不管；而 “#player span”，没有符号“>”，它就不论 span 和它的层级关系，其下的儿孙辈们统统使用这个样式（除非后续的儿孙辈又设定了子样式——子样式会覆盖父样式）。


本节重点：明晰帖子所用元素间的层级关系，以适当的缩进方式书写不同层级的HTML标签代码，元素的层级关系可在CSS中有所体现，亦可通过class制定针对多子孙元素的不同层级的样式。

前一篇: 六、如何安置各子元素的物理位置
下一篇: 八、父元素令子元素全居中的办法