CSS后代选择器、子元素选择器、相邻兄弟选择器

后代选择器

后代选择器（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元素的子元素。