後代選擇器

後代選擇器（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;}

body元素本身是html元素的子元素。