# 3.5 Selectors - class 和 id

在 html 當中的任何標籤，都可以給定 **class** 和 **id** 這兩個屬性：

**class**：表示樣式表的名稱。該名稱可以套用至多個元素上。

**id**：表示該元素的唯一名稱。在一個網頁當中，同樣的 id 名稱，不能重覆。

## 範例 1

```markup
<h1 class="title1">這是內文標題</h1>
<p id="the_para">這是段落</p>
```

這時，在 css 中，就可以透過 class 或 id 來套上樣式。例：

```css
/* . 符號表示 class 的名稱 */
.title1{
  color: blue;
}

/* # 符號表示 id 的名稱 */
#the_para{
  color: red;
}
```

## 範例 2

同一個元素，可以套用多個樣式名稱，以 \*\*空格 \*\*來做區隔，如下範例，會套用 **title1** 和 **change\_size** 這兩個樣式：

```markup
<h1 class="title1 change_size">這是內文標題</h1>
```

這時 `<h1>` 會套用以下兩個 CSS 的樣式表：

```css
.title1{
  color: blue;
}

.change_size{
  /* 文字大小設定成 20px */
  font-size: 20px;
}
```

註：**id** 屬性就沒有這種特性，一個元素不能有不同的 id。

## 範例3

元素標籤與 class 或 id 一起套用：

```markup
<h1 class="title1">這是h1內文標題</h1>
<h2 id="title2">這是h2內文標題</h2>
```

```css
h1.title1{
  color: red;
}
h2#title2{
  color: blue;
}
```

## 範例4

在 CSS 中，撰寫同時有兩個樣式以上的寫法：

```markup
<h1 class="title1">這是h1內文標題</h1>
<h1 class="title1 other_style">這是h1內文標題</h1>
```

```css
h1.title1{
  color: red;
}

/* h1 元素有 title1 樣式，同時也有 other_style 樣式，則會套用 */
h1.title1.other_style{
  border: 1px solid red;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/html-and-css/3.-css/3.4-class-he-id.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.