CSS 各類選擇器 | 梧所不學

CSS 能夠幫我們控制網頁的外觀和佈局，而這個控制的關鍵就是 CSS 選擇器，它們決定了樣式應該應用到哪些 HTML 元素。本文將介紹各類CSS選擇器，讓你在設計網頁樣式時能更得心應手。

1. 基本選擇器

元素選擇器

元素選擇器是直接選取 HTML 中的元素，並對其應用樣式。

p {
	color: blue;
}

類別選擇器

類別選擇器是選取具有相同 class 屬性的元素，類別選擇器是以句點 . 開頭。

.highlight {
	background-color: yellow;
}

ID 選擇器

ID 選擇器是選取具有唯一 id 屬性的元素，ID 選擇器是以井字號 # 開頭。

#header {
	text-align: center;
}

2. 群組與後代選擇器

群組選擇器

當需要對多個元素應用相同的樣式時，可以使用群組選擇器，元素之間以逗號分隔。

h1, h2 {
	color: green;
}

後代選擇器

後代選擇器是選取某個元素內部的所有指定元素。例如 : div p 會選取 <div> 內的所有 <p> 元素。

div p {
	font-size: 16px;
}

3. 子元素、相鄰兄弟與通用選擇器

子元素選擇器

子元素選擇器會選取某個元素的直接子元素，使用 > 符號分隔。例如 : div > p 只會選取 div 元素下的第一層 p 元素。

div > p {
	font-weight: bold;
}

相鄰兄弟選擇器

相鄰兄弟選擇器會選取緊接在特定元素後的第一個元素，使用 + 符號分隔。例如 : h1 + p 會選取 h1 元素後緊鄰的 p 元素。

h1 + p {
  color: gray;
}

通用選擇器

通用選擇器會選取所有元素，使用星號 * 表示，通常用於重置樣式或設定全局樣式。

* {
  margin: 0;
  padding: 0;
}

4. 屬性選擇器

根據元素的屬性值選取元素，可以選取具有特定屬性、屬性值等於特定值、屬性值包含特定字串等元素。

a[href] {
  color: blue;
}

input[type="text"] {
  border: 1px solid gray;
}

5. 偽類與偽元素選擇器

偽類選擇器

偽類選擇器是選取元素的特定狀態，例如 : a:hover 是選取滑鼠懸停在連結時的狀態。

a:hover {
  color: orange;
}

偽元素選擇器

偽元素選擇器選取元素的特定部分，例如 : p::first-letter 會選取所有 <p> 元素的首字母。

p::first-letter {
  font-size: 2em;
}

結語

熟悉各種 CSS 選擇器的使用方式，你可以更好的控制網頁元素的樣式，打造出頁面美觀且功能完善的網站。