3.3 符號

星號

$("*")：所有標籤。

逗號

$("h1, p")：標籤名稱為 h1 或 p 的元素。

空格

$("div p")：div 標籤裡面的所有 p 元素(不管是第一層子元素或更內層)。

大於符號

$("div > p")：div 標籤裡面的第一層子元素為 p 標籤的元素。

加號

$("p + p")：先找到 p 標籤，然後同層的下一個是 p 標籤的元素(例如以下的「段落2」符合)。

例：

<p>段落1</p>
<p>段落2(這個符合)</p>
<div>
  <p>段落3</p>
</div>
<p>段落4</p>

波浪符號

$("div ~ p")：先找到 div 標籤，然後同層後面所有的 p 標籤的元素。(例如以下的段落2、段落3都符合)

<p>段落1</p>

<div></div>

<p>段落2(符合)</p>
<p>段落3(符合)</p>

練習

延續 practice/selectors.html 頁面，更改內容為：

<h1>這是標題</h1>
<h1 id="my_title">這是我的標題</h1>
<p>這是段落1</p>
<p class="para para2">這是段落2</p>
<p class="para para3">段是段落3</p>

<hr>
<p class="para para4">段是段落4</p>

<div>
  <a href="#" target="_blank">這是連結</a>
  <p>div 裡的段落</p>
  <section>
    <p>div 裡更內層的段落</p>
  </section>
  <p>div 裡的段落</p>
</div>

<p>其它段落1</p>
<p>其它段落2</p>

試以下例子：

$("*").css("color", "red");

$("h1, p").css("color", "red");

$("div p").css("color", "red");

$("div > p").css("color", "red");

$("p + p").css("color", "red");

$("div ~ p").css("color", "red");