> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/jquery/3.-xuan-ze-zi-selectors/3.3-jin-jie-xuan-ze-zi.md).

# 3.3 符號

## 星號

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

## 逗號

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

## 空格

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

## 大於符號

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

## 加號

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

例：

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

## 波浪符號

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

```markup
<p>段落1</p>

<div></div>

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

## 練習

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

```markup
<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>
```

試以下例子：

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

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

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

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

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

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