触手生春【4.14】CSS与HTML结构
作者：ximicc 来源：ximicc博客 发布时间：2008-12-09 18:10:00
前面已经提到，CSS之所以如此强大，是因为它采用HTML文档结构来决定其样式的应用。但这仅仅只是一方面，因为它只暗示了CSS之所以使用文档结构，仅仅是为了决定将不同的规则应用于不同的元素这一点。
事实上文档的结构往样式的应用中扮演着更为重要的角色。为了理解这一角色我们需要理解文档是怎样结构化的。对于下面列举的这个简单的HTML文档，如图显示了其对应的"树型视图"：
CSS的大部分能力都是基于元素的父子关系。HTML文档，实际上大多数结构文档，都是基于元素的层次关系的，这种层次可以用下图的树形结构来刻画。在这样的层次图中，每个元素都处于整个结构文档中的某个位置，而且每个元素或是另一个元素的父元素，或是子元素，或者既是父元素又是子元素。
一个元素包含了另一个元素，那么这个元素就是另一个元素的父元素。例如在上图中，P元素是EM和STRONG元素的父元素，而STRONG是另一个定位锚(A)元素的父元素，这个定位锚元素又是另一个EM元素的父元素。相反地，一个元素被另一个元素所包含，那么它就是子元素。这样，图中的链接元素就是STRONG元素的子元素，STRONG又是段落元素的子元素，依次类推。
父和子的术语常常被一般化为祖先和后代这两个术语。但也有区别：在树形图中，如果一个元素刚好处于另一个元素的上面一层，那么它们就是父子关系。当然，子元素也是一个后代，父元素也是一个祖先。但是，如果从一个元素到另一个元素的路径上跨越了两个或更多层次，那么它们就具有祖先-后代关系。上图中，第一个UL元素是两个LI元素的父元素，但它也是第二个UL元素下所有元素的祖先元素，一直到最深一层的LI元素。
继续观察树型结构，可以看到定位锚元素是STRONG的子元素，同时也是段落元素的后代，还是BODY和HTML元素的后代。BODY元素是所有浏览器能显示的元素的祖先，当然HTML元素是所有元素的祖先。基于这个原因，HTML元素也被称为根元素。
0
投稿猜你喜欢
1. go介绍Go官方 提供一个名为go的命令，该命令可以用来下载go的依赖，构建安装go应用，运行和测试 Go程序等等， 我们比较常用的比- sqlite3 - SQLite 数据库SQLite 是一款轻量级、无需安装、零配置的嵌入式关系数据库。Python 自带 sql
- 一、思路往MySQL中插入1000000条数据只花了6秒钟！关键点：1.使用PreparedStatement对象2.rewriteBatc
- TensorFlow中tf.batch_matmul()用法如果有两个三阶张量，size分别为a.shape = [100, 3, 4]b.
- 1、启动SQL Server Management Studio，以Windows身份验证方式登录。2、在对象资源管理器窗口中，右键单击服务
- 首先 下载 jedis.jar包然后再 工程设置里面找到Libraries，点击＋。添加下载好的jedis.jar包。点击OK退出即可创建J
- 点阵字体是指根据文字的像素点来显示的字体，效果如下：使用Python读取并显示的过程如下：根据中文字符获取GB2312编码通过GB2312编
- 一、数据爬取的代码#encoding='utf-8'from selenium import webdriverimport
- javascript上下滑动广告效果 参数说明:客服果果(
- 淘宝招聘的一个css题目：css样式控制div水平垂直居中方法；<!DOCTYPE html PUBLIC "-//W3C/
- 创建之前项目之前 记得改一下 maven 提高下载Pom速度 记得 setting 中
- python excel文件(.xls文件)如何处理xlrd 用于读取文件，xlwt 用于写入文件,xlutils 是两个工具包的桥梁，也就
- 在Oracle 8i版本之前，使用internal用户来执行数据库的启动和关闭以及create database等操作；从8i版本以后，Or
- 分析社交网站，顺带画了张图，关于facebook的基本信息架构，没有涉及应用和插件的分析。
- 我们都知道因为操作系统的不同，很多游戏区分为安卓和苹果两个版本。那么之前学会python模拟点击的小伙伴开始担心，如果手机是ios版本那还能
- MySQL插件式存储引擎是MySQL数据库服务器中的组件，负责为数据库执行实际的数据I/O操作，并能允许和强制执行面向特殊应用需求的特定特性
- 今天看了一下数据结构的书，发现其实数据结构没有几种，线性表，数组，字符串，队列和栈，等等，其实是一回事，然后就是树结构，图结构。数据结构的理
- 公式首先需要了解CrossEntropyLoss的计算过程，交叉熵的函数是这样的：其中，其中yi表示真实的分类结果。这里只给出公式，关于Cr
- 先谈一下面包屑的由来：很久很久以前，在大森林的边上住着一个贫穷的樵夫，他妻子和两个孩子与他相依为命。他的儿子名叫汉赛尔，女儿名叫格莱特。后来
- 导言结束前面的几节，我们已经探讨过了如何使用GridView、DetailsView和FormView控件来显示数据。这些控件简单地操作提供
