(X)HTML的文档结构
作者：ddcatlee 来源：猫沙盆 时间：2008-06-30 12:25:00
前言：
书终于完稿了，我也有了一些自己的时间，于是决定将书中讲到的一些比较常见的知识点整理出来，发在Blog里面。当然也不会完全发表出来，毕竟还是要卖书挣钱买猫粮的。
CSS通过与(X)HTML的文档结构相对应的选择器（selector）来达到控制页面表现的目的，而文档结构不仅仅在CSS的应用上非常重要，对于行为层（例如使用JavaScript控制元素的行为）同样也非常重要。
4.1 文档结构
(X)HTML文档可以看作一个家族树，这个树有1个祖先——根元素，然后各元素依次向下排列，例如有XHTML代码如下，其文档树如图4-1所示。
图4-1 文档结构树
CSS大部分能力是基于元素的“父子”关系，如果元素A包含了元素B，那么元素A就是“父元素”，被包含的元素B是“子元素”。每个元素都是另一个元素的 “父”或者“子”或者两者都是。例如：<body>既是<html>的子元素，又是<h1>的父元素。在家族树中， 父子元素是相连的，而且父元素在子元素的上面一层。
“父”与“子”有时候又被一般化为“祖先（或称前辈）”和“后代（或称子孙）”，从一个元素到另一个元素中间跨越了一层或更多层，就是“祖先/ 后代”关系。例如图4-1中，<html>就是<h1>的祖先，<h1>则是<html>的后代。 <body>是所有浏览器能显示的元素的祖先，而<html>是所有元素的祖先，也称为“根元素（root）”。“祖先/后代” 关系包含“父子”关系。
有着相同父元素的元素之间互为“兄弟”关系。例如图4-1中，<h1>和<ol>为兄弟关系，<body>是它们共同的父元素，<ul>里的3个<li>也互相为兄弟关系。
提示：很多选择器都是针对文档结构匹配的，因此掌握文档结构的意义非常重要。
0
投稿猜你喜欢
用什么库写 Python 命令行程序(示例代码详解)
Vue Element前端应用开发之整合ABP框架的前端登录
详解SQL Server分布式查询
Django中和时区相关的安全问题详解
python基础教程之实现石头剪刀布游戏示例
oracle 合并查询 事务 sql函数小知识学习
Python Opencv中基础的知识点
详解Vue项目的打包方式
python实现人人网登录示例分享
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
1500个绚丽主题 谷歌中国个人风格首页发布
详细讲解HTTP协议工作方式
如何基于Python制作有道翻译小工具
日文片假名导致 Access 搜索“内存溢出”
用javascript实现gb2312转utf-8的脚本
有关JS中Event对象的几点总结
解决vue3打包过后空白页面的情况
