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

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

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

好比現在有三個盒子


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;
}

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


---

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

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

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

// css

.largeSize {
  font-size: 50px;
}

.orange {
  color: orange;
}


### 但是 id 只能有一個

#orangeFont {
  color: orange;
}

---

### grouping selector 寫法:

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

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

h1,h2,p {
  color: blue;
}

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