2025-09-04 CSS2——常見選擇器

文章目錄

1 元素選擇器
2 id 選擇器
3 class 選擇器
4 通用選擇器
5 子元素選擇器
6 后代選擇器
7 相鄰兄弟選擇器
8 后續兄弟選擇器
9 偽類選擇器
10 偽元素選擇器
11 屬性選擇器
- 11.1 `[attribute]`
- 11.2 `[attribute="value"]`
- 11.3 `[attribute~="value"]`與`[attribute*="value"]`
- 11.4 `[attribute|="value"]`與`[attribute^="value"]`
- 11.5 `[attribute$="value"]`

選擇器是 CSS 規則的開頭部分，用于選擇要應用樣式的 HTML 元素。選擇器非常重要，因為它們決定了你的樣式會作用于哪些元素。

選擇器類型	符號	描述	示例
元素選擇器	`p`	直接通過 HTML 標簽名來選擇所有同類元素。	`h2 { color: teal; }`
ID 選擇器	`#`	通過元素的 `id` 屬性來選擇特定元素，一個 ID 在文檔中必須是唯一的。	`#element { font-size: 35px; }`
class 選擇器	`.`	通過元素的 `class` 屬性來選擇元素，一個類可以被多個元素使用。	`.highlight { background-color: yellow; }`
通用選擇器	`*`	選擇所有 HTML 元素。常用于重置瀏覽器默認樣式。	`* { font-family: '楷體'; }`
子元素選擇器	`>`	選擇直接位于父元素內部的子元素。它只選擇第一層級的子元素，不包括更深層級的后代。	`.father > p { color: yellowgreen; }`
后代選擇器	（空格）	選擇位于父元素內部的所有后代元素，無論層級有多深。它包括子元素、孫子元素等。	`.father p { color: coral; }`
相鄰兄弟選擇器	`+`	選擇緊跟在指定元素后面的第一個同級元素。	`h3 + p { background-color: red; }`
后續兄弟選擇器	`~`	選取所有指定元素之后的相鄰兄弟元素。	`h3 ~ p { background-color: red; }`
偽類選擇器	`:`	選擇處于特定狀態或位置的元素，常用于用戶交互。	`:hover` 偽類會在鼠標懸停時應用樣式。
偽元素選擇器	`::`	用于創建并樣式化虛擬元素，而不是選擇實際存在的元素。	`::before` 和 `::after` 用于在元素內容前后插入虛擬內容。
屬性選擇器	`[attribute=value]`	用于根據元素的屬性或屬性值來選擇 HTML 元素。	`[type] { border: 1px solid red; }`

1 元素選擇器

通過元素名稱選擇 HTML 元素。

語法： element { /* 樣式 */ }

如下代碼，p 選擇器將選擇所有 <p> 元素:

p {color:red;text-align:center;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>p{color:red;text-align:center;} </style></head><body><p>Hello World!</p><p>這個段落采用CSS樣式化。</p></body>
</html>

2 id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，CSS 中 id 選擇器以 “#” 來定義。

語法： #id { /* 樣式 */ }

以下的樣式規則應用于元素屬性 id=“para1”:

#para1
{text-align:center;color:red;
}

ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>#para1{text-align:center;color:red;} </style></head><body><p id="para1">Hello World!</p><p>這個段落不受該樣式的影響。</p></body>
</html>

3 class 選擇器

class 選擇器用于描述一組元素的樣式，class 選擇器有別于 id 選擇器，class可以在多個元素中使用。

語法： .class { /* 樣式 */ }

在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。

.center {text-align:center;}

你也可以指定特定的 HTML 元素使用 class。

在以下實例中, 所有的 p 元素使用 class=“center” 讓該元素的文本居中:

p.center {text-align:center;}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>p.center{text-align:center;}</style></head><body><h1 class="center">這個標題不受影響</h1><p class="center">這個段落居中對齊。</p> </body>
</html>

4 通用選擇器

選擇所有 HTML 元素。通用選擇器使用 * 符號，選擇頁面上的所有元素。

語法： * { /* 樣式 */ }

以下實例選擇了所有元素：

* {background-color: #b0c4de;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>菜鳥教程(runoob.com)</title><style>* {background-color: #b0c4de;}</style></head><body><h1>我的 CSS web 頁!</h1><p>你好世界！這是來自 runoob 菜鳥教程的實例。</p></body>
</html>

5 子元素選擇器

子元素選擇器使用大于號 >，它會選中直接位于父元素內部的子元素。它只選擇第一層級的子元素，不包括更深層級的后代元素。

語法： parent > child { /* 樣式 */ }

以下實例選擇了<div>元素中所有直接子元素 <p> ：

div>p
{background-color:yellow;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>div>p{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div><h2>My name is Donald</h2><p>I live in Duckburg.</p></div><div><span><p>I will not be styled.</p></span></div><p>My best friend is Mickey.</p></body>
</html>

6 后代選擇器

后代選擇器使用空格，它會選中位于父元素內部的所有后代元素，無論層級有多深。這包括子元素、孫子元素、曾孫子元素等。

語法： ancestor descendant { /* 樣式 */ }

以下實例選取所有 <p> 元素插入到 <div> 元素中:

div p
{background-color:yellow;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>div p{background-color:yellow;}</style></head><body><div><p>段落 1。 在 div 中。</p><p>段落 2。 在 div 中。</p></div><p>段落 3。不在 div 中。</p><p>段落 4。不在 div 中。</p></body>
</html>

7 相鄰兄弟選擇器

相鄰兄弟選擇器使用加號 +，它會選中緊跟在指定元素后面的第一個同級元素。這兩個元素必須擁有同一個父元素，并且選擇器中的第二個元素必須緊跟在第一個元素之后。

語法： element1 + element2 { /* 樣式 */ }

以下實例選取了所有位于 <div> 元素后的第一個 <p> 元素：

div+p
{background-color:yellow;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>div+p{background-color:yellow;}</style></head><body><h1>文章標題</h1><div><h2>DIV 內部標題</h2><p>DIV 內部段落。</p></div><p>DIV 之后的第一個 P 元素。</p><p>DIV 之后的第二個 P 元素。</p></body>
</html>

8 后續兄弟選擇器

后續兄弟選擇器選取所有指定元素之后的相鄰兄弟元素。

以下實例選取了所有 <div> 元素之后的所有相鄰兄弟元素 <p>:

div~p
{background-color:yellow;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>div~p{background-color:yellow;}</style></head><body><p>之前段落，不會添加背景顏色。</p><div><p>段落 1。 在 div 中。</p><p>段落 2。 在 div 中。</p></div><p>段落 3。不在 div 中。</p><p>段落 4。不在 div 中。</p></body>
</html>

9 偽類選擇器

CSS偽類用于選擇處于特定狀態或位置的元素，而不是基于它們的名稱、ID 或類名。偽類以冒號 : 開頭。它們常用于用戶交互，如鼠標懸停、鏈接訪問狀態等。

語法： selector:pseudo-class { /* 樣式 */ }

CSS類也可以使用偽類：

selector.class:pseudo-class { /* 樣式 */ }

在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以以不同的方式顯示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>a:link {color:#000000;}      /* 未訪問鏈接*/a:visited {color:#00FF00;}  /* 已訪問鏈接 */a:hover {color:#FF00FF;}  /* 鼠標移動到鏈接上 */a:active {color:#0000FF;}  /* 鼠標點擊時 */</style></head><body><p><b><a href="/css/" target="_blank">這是一個鏈接</a></b></p><p><b>注意：</b> a:hover 必須在 a:link 和 a:visited 之后，需要嚴格按順序才能看到效果。</p><p><b>注意：</b> a:active 必須在 a:hover 之后。</p></body>
</html>

注意： 在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

**注意：**偽類的名稱不區分大小寫。

在下面的例子中，選擇器匹配所有作為元素的第一個子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i
{color:blue;
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>p:first-child i{color:blue;} </style></head><body><p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p><p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p><p><b>注意:</b> 當:first-child 作用于 IE8 及更早版本的瀏覽器, DOCTYPE 必須已經定義.</p></body>
</html>

10 偽元素選擇器

CSS 偽元素是一種特殊的選擇器，它可以在不改變 HTML 結構的情況下對頁面元素的特定部分進行樣式設置。

偽元素用于創建并樣式化虛擬元素，這些元素在 HTML 文檔中并不實際存在。偽元素以雙冒號 :: 開頭。

語法： selector::pseudo-element { /* 樣式 */ }

CSS 類也可以使用偽元素：

selector.class::pseudo-element { /* 樣式 */ }

常用的 CSS 偽元素有 ::before、::after、::first-line、::first-letter 等。

::before/::after 偽元素可以在元素的內容前面/后面插入新內容。

下面的例子在每個 <h1> 元素前面插入內容 "Before: "：

h1::before 
{content:"Before: ";
}

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>菜鳥教程(runoob.com)</title><style>h1::before {content: "Before";}</style></head><body><h1>This is a heading</h1><p>The :before pseudo-element inserts content before an element.</p><h1>This is a heading</h1><p><b>注意:</b>僅當 !DOCTYPE 已經聲明 IE8 支持這個內容屬性</p></body>
</html>

11 屬性選擇器

CSS 屬性選擇器用于根據元素的屬性或屬性值來選擇 HTML 元素。

屬性選擇器可以幫助你在不需要為元素添加類或 ID 的情況下對其進行樣式化。

11.1 `[attribute]`

選擇帶有指定屬性的所有元素（無論屬性值是什么）。

/* 選擇所有具有 `type` 屬性的元素 */
[type] {border: 1px solid red;
}

下面的例子是把包含標題（title）的所有元素變為藍色：

<!DOCTYPE html>
<html><head><style>[title]{color:blue;}</style></head><body><h2>Will apply to:</h2><h1 title="Hello world">Hello world</h1><a title="runoob.com" href="https://www.runoob.com/">runoob.com</a><hr><h2>Will not apply to:</h2><p>Hello!</p></body>
</html>

11.2 `[attribute="value"]`

選擇具有指定屬性和值完全匹配的元素。

/* 選擇所有 `type` 屬性等于 `text` 的元素 */
[type="text"] {background-color: yellow;
}

下面的實例改變了標題 title=‘runoob’ 元素的邊框樣式:

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title>  <style>[title=runoob]{border:5px solid green;}</style></head><body><h2>將適用:</h2><img title="runoob" src="logo.png" width="270" height="50" /><br><a title="runoob" href="https://www.runoob.com/">runoob</a><hr><h2>將不適用:</h2><p title="greeting">Hi!</p><a class="runoob" href="https://www.runoob.com/">runoob</a></body>
</html>

11.3 `[attribute~="value"]`與`[attribute*="value"]`

[attribute~="value"] 選擇屬性值中包含指定的獨立單詞 value（用空格分隔的詞列表之一）的元素。
```
/* 選擇屬性值中包含單詞 `button` 的元素 */
[class~="button"] {font-weight: bold;
}
```

[attribute*="value"] 選擇屬性值中包含指定值的元素，不要求是獨立單詞。

/* 選擇所有 `title` 屬性中連續包含 `tutorial` 的元素 */
[title*="tutorial"] {font-style: italic;
}

下面是包含指定值的title屬性的元素樣式的例子，使用（~）分隔屬性和值:

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title>  <style>[title*=hello]{color:red;} [title~=hello]{color:blue;} </style></head><body><h2>~=:</h2><h1 title="hello world">Hello world</h1><p title="student hello">Hello CSS students!</p><hr><h2>*=:</h2><p title="student-hello">Hi CSS students!</p></body>
</html>

11.4 `[attribute|="value"]`與`[attribute^="value"]`

[attribute|="value"]：選擇完整且唯一的單詞 value，或者以 value- 分隔開，常用于語言代碼。
```
/* 選擇所有 `lang` 屬性是 `en` 或者以 `en-` 開頭的元素 */
[lang|="en"] {color: green;
}
```

[attribute^="value"]：選擇屬性值以指定值開頭的元素，不要求是獨立單詞。

/* 選擇所有 `href` 屬性以 `https` 開頭的鏈接 */
[href^="https"] {text-decoration: none;
}

11.5 `[attribute$="value"]`

選擇屬性值以指定值結尾的元素，不要求是獨立單詞。

/* 選擇所有 src 屬性以 .jpg 結尾的圖片 */
[src$=".jpg"] {border: 2px solid blue;
}