HTML文档中的元素是一种层级结构。文档中的元素要么是另一个元素的父元素，要么是两一个元素的子元素；
在文档结构中，如果一个元素的位置直接在另一个元素的上方，那么前者就是后者的父元素；
父子元素是祖辈元素和后代元素的特例；如果两个元素的层级是连续的，那他们直接是父子关系，如果两个元素跨越两个层级以上，那他们是祖先和后代的关系；
html元素是整个文档的祖辈，也称为根元素；
后代选择符
后代选择符也叫上下文选择符；在后代选择符中，规则中的选择符由两个和多个空格隔开的选择符构成； 后代选择符中不只是可以使用两个单独的选择符；
选择符中的空格是一种连接符，从右到左读，空格连接符可以理解为“在内部”，或者“是其后代”；
如：
<div>
<p><em>112</em></p>
</div>
div p {color:red}
div em{color:white}
选择子元素
如果不想选择所有后代元素，只选择一个元素的子元素，可以使用子代连接符，大于号（>）
如：
div>p {}
p>em {}
同一个选择符中还可以同时使用后代选择符和子代选择符
div p>em {}
选择兄弟元素
选择同一个父元素中紧跟在另一个元素后面的一个元素，可以使用兄弟选择符，即一个加号(+)
如：
<div>
<h1>1</h1>
<p><em>112</em></p>
</div>
h1 + p {/*选择p元素*/ }
两个元素直接的文本不影响兄弟选择符；
选择后续兄弟
选择一个元素后面同属与一个父元素的另一个元素，可以使用连接符波浪号(~)
如：
<div>
<h1>1</h1>
<p><em>112</em></p>
<a>333</a>
</div>
h1 ~a {/*后续同胞兄弟选择*/}
