Selector選擇器的作用和用法

一、Selector選擇器的概念

在HTML和CSS中，選擇器是一種模式，用於選擇要在網頁上進行樣式處理或操作的元素。HTML中的選擇器可以被用來選擇重要的HTML元素，比如：表單元素、圖像和鏈接等。

選擇器通常分為四種類型，分別是元素選擇器、類選擇器、ID選擇器和組合選擇器。

二、元素選擇器

元素選擇器是HTML元素的名稱，比如：p、div、span和body等。元素選擇器可以應用於任何HTML元素。一個非常簡單的例子，如下所示：

p {
  color: red;
}

上述代碼會將所有段落文本的顏色都設置成紅色。

此外，還可以使用通配符 * 來匹配所有的HTML元素。例如：

* {
  border: 1px solid black;
}

上述代碼會給所有HTML元素都添加一個1像素的黑色邊框。

三、類選擇器

類選擇器是以點號 . 開頭的選擇器，用於選擇具有相同 class 屬性值的HTML元素。例如：

.red-text {
  color: red;
}

上述代碼會將所有 class 屬性包含 red-text 值的HTML元素的文本顏色設置成紅色。

可以使用多個類名來選擇元素。例如：

.red-text.large {
  font-size: 20px;
}

上述代碼會將所有 class 屬性包含 red-text 和 large 值的HTML元素的字體大小設置成20px。

四、ID選擇器

ID選擇器是以井號 # 開頭的選擇器，用於選擇具有特定ID屬性值的HTML元素。ID值在整個HTML文檔中必須是唯一的，因此同一頁面中只有一個元素可以具有與之匹配的ID選擇器。例如：

#logo {
  width: 200px;
  height: 100px;
}

上述代碼會將具有ID屬性值為 logo 的HTML元素的寬度設置成200px，高度設置成100px。

五、組合選擇器

組合選擇器是指組合兩種或多種選擇器來選擇特定的HTML元素。組合選擇器包括後代選擇器、子選擇器和相鄰兄弟選擇器。

1. 後代選擇器

後代選擇器使用空格來組合兩個選擇器，選擇器之間的空格表示一個選擇器所包含的所有元素。

.item p {
  color: red;
}

上述代碼會將所有 class 屬性包含 item 值的HTML元素中的所有段落文本顏色設置成紅色。

2. 子選擇器

子選擇器使用大於號 > 來組合兩個選擇器，只選擇指定元素的子元素。

ul > li {
  font-weight: bold;
}

上述代碼會將所有無序列表中的列表項文本設置成粗體。

3. 相鄰兄弟選擇器

相鄰兄弟選擇器使用加號 + 來組合兩個選擇器，只選擇指定元素後面緊接着的兄弟元素。

h1 + p {
  font-size: 20px;
}

上述代碼會將所有副標題後的第一個段落文本設置成20px字體大小。

六、總結

Selector選擇器是一種模式，用於選擇要在網頁上進行樣式處理或操作的元素。可以根據需要選擇元素、類、ID屬性和組合選擇器來進行選擇。這些選擇器都有各自的特點，使用方式和場景，應根據具體情況來進行靈活使用。