3.4 Selectors - 符號

以此段 html 為例，來瞭解當使用不同符號時，哪些文字會變紅色：

<p>段落一</p>
<div>
  <p>段落二</p>
  <section>
    <p>段落三</p>
  </section>
</div>
<p>段落四</p>
<p>段落五</p>
<a href="#">連結文字</a>

逗號(,)

div, p{
  color: red;
}

<div> 及 <p> 都會套用相同樣式。

除了連結文字之外，其它文字都會變紅色。

空格：內層全部

div p{
  color: red;
}

<div> 內層的所有 <p> 才會套用到樣式。

段落二和段落三都會變成紅色。

大於符號(>)：第一層子元素

div > p{
  color: red;
}

<div> 內層的第一層子元素 <p> 才會套用到樣式。

只有段落二會變成紅色。

加號(+)：下個相鄰元素

div + p {
  color: red;
}

只有段落四會變紅色。

星號(*)：所有元素

*{
  color: red;
}

全部文字都會變成紅色。

波浪號(~)

波浪符號則是影響到下一個同階層的所有匹配到的元素

div ~ p {
  color: red;
}

只有段落四和段落五，會變紅色。