开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
如何理解简单文档结构中的父子关系
之前的博客里有提到过，HTML文档中是由结构性元素和单标签元素组成的，但是大部分元素都是结构性元素。
而这些结构性元素都是一个包一个的，那么其实就可以将这些元素的包含关系抽象为一个树的形式。
<html>
<head>
<title>标签页标题</title>
<meta name="keywords" content="关键词1,关键词2">
<meta name="description" content="简单描述网页的语句">
<meta charset="utf-8">
</head>
<body>
</body>
</html>
例如，上述代码，抽象出来的树形结构图便为下图。
meta为head标签的子节点，head为meta的父节点，html为meta的祖父节点，meta为html的孙子节点。
一个父节点可以有多个子节点，一个子节点只能有一个父节点。
这样的结构我们管他叫树，而树最顶部的父节点我们一般叫做根节点。只有一个根节点我们叫他单根树，反之叫做多根树。
后代选择器
语法与作用
父节点的选择器 后代元素的选择器 后代元素的选择器...
在选择器之间使用一个或多个空格间隔，此时空格就是一种操作符。 若是想要在某一个或是某一类元素的后代元素中根据特定特征选取元素时，可用该选择器。
注意：
- 此处的后代指的不仅仅是某一元素a的直接子代，但凡是寻根溯源能回到a的节点都是a的子代。
- 但凡是父节点中满足子代选择器的子代，无论有多少个，无论层级有多深，都会被选中。
示例
#test1 .t {
color: blue;
}
<div id="test1">
<div>
<p class="t">第一个文本</p>
<div>
<p>第2个文本</p>
</div>
</div>
<div class="t">
<p>第3个文本</p>
<div>第4个文本</div>
</div>
</div>
上述例子中，第1，3，4个个文本字体都是蓝的。
子代连结符
语法与作用
与后代选择器的区别就是，该选择器只会选中父节点的直接子节点，即父节点紧接的下一级子节点中的内容，不会继续向下选中层级更深的后代。
父节点选择器 > 直接子代选择器
示例
<div id="test1">
<div>
<p class="t">第一个文本</p>
<div>
<p>第2个文本</p>
</div>
</div>
<div class="t">
<p>第3个文本</p>
<div>第4个文本</div>
</div>
</div>
#test1 > .t {
color: blue;
}
上述例子中，第三个和第四个文本蓝色。
紧邻同胞连结符
语法与作用
若是想选择拥有同一个父节点，且紧跟在一个元素后的元素，那么可以使用该选择器。
前驱节点选择器 + 后驱节点选择器
示例
<div id="test1">
<div>
<p class="t">第一个文本</p>
<div>
<p>第2个文本</p>
</div>
</div>
<div class="t">
<p>第3个文本</p>
<div>第4个文本</div>
</div>
</div>
.t p + div {
color: blue;
}
上述例子中，第四个文本是蓝色。
一般同胞连结符
语法与作用
若是想选择拥有同一个父节点，且在一个元素后面的元素，那么可以使用该选择器。与紧邻同胞选择器的区别就是该选择器不要求同胞紧邻。
前驱节点选择器 ~ 后驱节点选择器
示例
<div id="test1">
<div>
<p class="t">第一个文本</p>
<div>
<p>第2个文本</p>
</div>
</div>
<div class="t">
<p>第3个文本</p>
<div>第4个文本</div>
</div>
</div>
.t p ~ div {
color: blue;
}
上述例子中，第二和第四个文本是蓝色。
