CSS-contextual-selector 關聯選取器

將CSS樣式應用到一群有關連的元素上

前代元素名稱合併子後代元素名稱{屬性名稱：屬性數值;}

後代選取器（合併子是一個 空白字元）

後代元素包含在前代元素之內

ul li em {color: red;}  

h1 em, h2 em {color: green;}

<ul>
  <li>cake</li>
  <li><em>chocolate</em></li> // chocolate 會變成 red
</ul>

<h1><em>cake</em></h1>        // cake 會變成 green
<h2><em>chocolate</em></h2>   // chocolate 會變成 green

子代選取器（合併子是一個 > 字元）

前代與後代元素之間不可以有其他元素存在

ul li>em {color: red;}

<ul>
  <li><strong><em>cake</em></strong></li>
  <li><em>chocolate</em></li> // chocolate 會變成 red
</ul>

相鄰選取器（合併子是一個 + 字元）

只有直接接在前代元素後面的後代元素

h1 + p {color: red;}
p {color: green;}

<h1>cake</h1>
<p>chocolate</p>  // chocolate 會變成 red
<p>cookie</p>     // cookie 是green
<p>puff</p>       // puff 是green

一般選取器（合併子是一個 ～ 字元）

所有接在前代元素後面的 後代元素 都會吃到

h1 ～ p {color: red;}
p {color: green;}

<h1>cake</h1>
<p>chocolate</p>  // chocolate 會變成 red
<p>cookie</p>     // cookie 會變成 red
<p>puff</p>       // puff 會變成 red