后代选择器
后代选择器（descendant selector）又称为包含选择器。
后台选择器可以选择作为某元素后代的元素。
例子：如果只希望h1元素中的em元素应用样式，可以这样写：em元素：强调文本
h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p>
注意：如果写作ul em，这个语法就会选择ul元素继承的所有em元素，而不论em的嵌套层次多深。
子元素选择器
如果不是希望任意的后代元素，而是缩小范围，只选择某个元素的子元素，可以使用子元素选择器。
例如，如果希望选择只作为h1元素的子元素中strong元素，可以写成：
h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
这个规则会把第一个h1下面的俩个strong元素变成红色，但是第二个h1中的strong不受影响。
结合后代选择器和子选择器
table.company td > p
上面的选择器会选择作为td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含company
的class属性。
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
例如，如果要增加紧接在h1元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在h1元素后出现的段落，h1和p元素拥有共同的父元素”
语法解释
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符。
注意：只能改变相邻兄弟中的第二个元素。
例子：
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
li + li {font-weight:bold;}
注意：上面这个选择器只会把列表中的第二个和第三个列表项变成粗体。第一个列表项不受影响。
结合其他选择器
相邻兄弟结合符还可以结合其他结合符:
html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在table元素后出现的所有兄弟ul元素，该table元素包含在一个body元素中，
body元素本身是html元素的子元素。