---
# System prepended metadata

title: 'CSS 5. CSS 選擇器 - Element, ID, Class Selectors'
tags: [2022 網頁開發全攻略教程 / CSS篇章]

---

# CSS 5. CSS 選擇器 - Element, ID, Class Selectors

### HTML Tags 「attribute」 / 標籤「屬性」:

- Class / id 是什麼? 之間的差異性?

  好比現在有三個盒子
  
  ![](https://i.imgur.com/zWaqaUp.png)
 
  HTML 通時寫三個 .box，CSS 只需要設定一次即可。 

// HTML

```
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
```  

// CSS

```
.box {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
```

### id 只能有一個，它就像一個身份證：

- class 在 HTML 可以出現很多次，但 id 只能有一個。

  例如這三個箱子，我們要用顏色來區別，第二個我要改成藍色。
  
// HTML:

- 在第二個 tag 加入一個 `id="blue"`
```
<div class="box"></div>
<br>
<div id="blue" class="box"></div>
<br>
<div class="box"></div>
```

// CSS:

- id 的寫法是 前面# 後面暱稱

```
.box {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}

#blue {
  background: blue;
}

```

- 可以看到第二個箱子變成藍色:

![](https://i.imgur.com/jveGNL9.png)


---

### 一個標籤可以寫入多個以上的 class 來添加其屬性

- 台南棒球場此段落就獲得一個橘色、大尺寸 50px 文字大小的樣式。

```
<p class="largeSize orange">台南棒球場</p>
```

// css

```
.largeSize {
  font-size: 50px;
}

.orange {
  color: orange;
}
```
![](https://i.imgur.com/FYeTycc.png)

### 但是 id 只能有一個

```
#orangeFont {
  color: orange;
}
```



---

### grouping selector 寫法:

- 假設有數個以上的標籤，需要同時套用到藍色的做法:

```
// 元素之間加入 , 即可:

h1,h2,p {
  color: blue;
}
```

###### tags: `2022 網頁開發全攻略教程 / CSS篇章`