午后・时光

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

位置: 首页 > 马黑教程[ 发布时间: 2023.3.2  作者: 花飞飞  阅读: 183 ]
七、弄清元素间的父子层级关系


当 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制定针对多子孙元素的不同层级的样式。

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

发表评论:

       

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com