今天來認識CSS的選擇器~

CSS選擇器

1.元素選擇器(Element Selector)

元素選擇器是最基本的選擇器之一，用於選擇所有指定的 HTML 標籤。這些選擇器會針對頁面中所有相同類型的元素應用相同的樣式。

p {
color: blue;
}

此範例中的 p 選擇器將所有段落（<p>）文字設置為藍色。無論頁面中有多少個段落元素，它們都會應用此樣式。

2.類選擇器(Class Selector)

類選擇器使用 . 符號來選擇擁有特定 class 的元素。它是最常用的選擇器之一，因為一個 class 可以應用於多個元素，並允許更靈活的樣式控制。

.highlight {
background-color: yellow;
}

在這個範例中，擁有 highlight class 的段落會顯示黃色背景，而沒有該 class 的段落則不會受到影響。

3.ID選擇器(ID Selector)

ID 選擇器使用 # 符號來選擇特定 ID 的元素。每個 ID 在頁面中應該是唯一的，因此 ID 選擇器只能應用於一個元素。

#header {
font-size: 24px;
color: red;
}

此範例中，ID 為 header 的元素（<h1>）會應用紅色字體且字體大小為 24px，其他元素不會受到影響。

4.群組選擇器(Group Selector)

群組選擇器允許你一次對多個元素應用相同的樣式。使用逗號將選擇器分隔開來，並對每個選擇的元素應用相同的樣式。

h1, h2, p {
font-family: Arial, sans-serif;
}

此範例中，h1、h2 和 p 元素會應用相同的字體。

今天先介紹到這裡，謝謝觀看！