基本的 CSS 選擇器

在 CSS 中，你已經瞭解了選擇器是如何用來定位我們網頁上想要樣式化的 HTML 元素的。CSS 提供了多種多樣的選擇器，可以在選擇要樣式化的元素時實現精確控制。在接下來的幾篇文章中，我們將深入探討不同型別的選擇器。本文將回顧一些選擇器的基礎知識，包括基本型別選擇器、類選擇器、ID 選擇器和選擇器列表。我們還將介紹通用選擇器。

預備知識	HTML 基礎知識（學習基本 HTML 語法）。
學習成果	基本選擇器型別 — 元素型別、類、ID。瞭解 ID 在每個文件中都是唯一的 — 你應該使用 ID 來選擇一個特定的元素。瞭解一個元素可以有多個類，並且可以根據需要使用這些類來疊加樣式。選擇器列表。通用選擇器。

什麼是選擇器？

CSS 選擇器是 CSS 規則的第一部分。它是由元素和其他術語組成的模式，用於告訴瀏覽器應選擇哪些 HTML 元素來應用規則中的 CSS 屬性值。被選擇器選中的一個或多個元素被稱為選擇器的主體。

Some code with the h1 highlighted.

在之前的文章中，你可能已經遇到了一些不同的選擇器，並瞭解到有多種方式可以定位文件中的元素——例如，透過選擇一個元素（如 h1）或一個類（如 .special）。讓我們從回顧你已經見過的一些主要選擇器開始。

型別選擇器

型別選擇器有時被稱為標籤名選擇器或元素選擇器，因為它選擇文件中的 HTML 標籤/元素。在下面的示例中，我們使用了 span、em 和 strong 選擇器。

嘗試編輯以下示例（點選 "Play" 在 MDN Playground 中開啟），新增一條 CSS 規則，選擇 <h1> 元素並將其顏色更改為藍色。

html

<h1>Type selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

css

body {
  font-family: sans-serif;
}

span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

類選擇器

區分大小寫的類選擇器以點（.）字元開頭。它將選擇文件中應用了該類的所有內容。在下面的即時示例中，我們建立了一個名為 highlight 的類，並將其應用到文件中的多個位置。所有應用了該類的元素都將被高亮顯示。

html

<h1 class="highlight">Class selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
  tomatillo melon azuki bean garlic.
</p>

<p class="highlight">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

css

body {
  font-family: sans-serif;
}

.highlight {
  background-color: yellow;
}

使用類選擇器

嘗試編輯上面的示例（使用 MDN Playground）以進行以下更改：

編輯 HTML 以更改 .highlight 樣式所應用到的內容。例如，你可以新增一些 <span> 元素來包裹現有內容的不同部分並對其應用 highlight 類，刪除一些現有的 highlight 類，或新增一些新內容並對其應用 highlight 類。
編輯 CSS 以修改 .highlight 規則中的宣告，如果需要，可以新增新的宣告，並注意這會如何影響所有應用了 highlight 類的元素的樣式。
在 CSS 中建立一個新的類規則，其中包含不同的宣告（例如，選擇器為 .highlight2），然後嘗試將其應用到你的某些 HTML 中。

定位特定元素上的類

你可以建立一個選擇器，用於定位應用了該類的特定元素。在下一個示例中，我們將把帶有 highlight 類的 <span> 和帶有 highlight 類的 <h1> 標題以不同方式高亮顯示。我們透過使用我們想要定位的元素的型別選擇器，並在其後面緊跟一個點號（沒有空格）和類名來實現這一點。

html

<h1 class="highlight">Class selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
  tomatillo melon azuki bean garlic.
</p>

<p class="highlight">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

css

body {
  font-family: sans-serif;
}

span.highlight {
  background-color: yellow;
}

h1.highlight {
  background-color: pink;
}

這種方法縮小了規則的作用範圍。該規則將只應用於特定的元素和類的組合。如果你決定該規則也應應用於其他元素，則需要新增另一個選擇器。

如果元素應用了多個類，則定位該元素

你可以將多個類應用於一個元素並單獨定位它們，或者僅當選擇器中包含所有類時才選擇該元素。這在構建可以以不同方式組合到你的網站上的元件時非常有用。

在下面的示例中，我們有一個包含註釋的 <div>。當該框具有 notebox 類時，會應用灰色邊框。如果它還具有 warning 或 danger 類，我們會更改 border-color。

我們可以透過將兩個類連結在一起，中間沒有空格，來告訴瀏覽器我們只希望匹配同時應用了這兩個類的元素。你會看到最後一個 <div> 沒有應用任何樣式，因為它只具有 danger 類；它還需要 notebox 才能應用任何樣式。

html

<div class="notebox">This is an informational note.</div>

<div class="notebox warning">This note shows a warning.</div>

<div class="notebox danger">This note shows danger!</div>

<div class="danger">
  This won't get styled — it also needs to have the notebox class
</div>

css

body {
  font-family: sans-serif;
}

.notebox {
  border: 4px solid #666666;
  padding: 0.5em;
  margin: 0.5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

ID 選擇器

區分大小寫的 ID 選擇器以 # 而不是點字元開頭，但其用法與類選擇器相同。不同之處在於一個 ID 在每個頁面上只能使用一次，並且元素只能應用一個 id 值。它可以選擇設定了 id 的元素，並且你可以在 ID 前面加上型別選擇器，以便僅當元素和 ID 都匹配時才定位該元素。你可以在以下示例中看到這兩種用法。

html

<h1 id="heading">ID selector</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>

<p id="one">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

css

body {
  font-family: sans-serif;
}

#one {
  background-color: yellow;
}

h1#heading {
  color: rebeccapurple;
}

警告： 在一個文件中多次使用相同的 ID 可能在樣式化方面看起來有效，但請不要這樣做。這會導致程式碼無效，並在許多地方引起奇怪的行為。

使用 ID 選擇器

嘗試編輯上面的示例以進行以下更改：

編輯 HTML 以將 #one 樣式應用於第一個段落而不是第二個段落。
編輯 CSS 以修改 ID 選擇器中的宣告，並注意這如何改變 HTML 的外觀。

選擇器列表

如果多個事物使用相同的 CSS，那麼單個選擇器可以組合成一個選擇器列表，以便將規則應用於所有單個選擇器。例如，如果我的 h1 和一個 .special 類具有相同的 CSS，我可以透過編寫兩條單獨的規則來實現。

css

h1 {
  color: blue;
}

.special {
  color: blue;
}

我也可以透過在它們之間新增逗號，將它們組合成一個選擇器列表。

css

h1, .special {
  color: blue;
}

逗號前後允許有空白。如果每個選擇器都在新的一行上，你可能會覺得選擇器更具可讀性。

css

h1,
.special {
  color: blue;
}

使用選擇器列表

在下面的示例中，嘗試組合兩個具有相同宣告的選擇器。組合後，視覺顯示應該保持不變。

html

<h1>Type selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

css

body {
  font-family: sans-serif;
}
span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

選擇器列表中的無效選擇器

當你以這種方式對選擇器進行分組時，如果任何選擇器在語法上無效，則整個規則都將被忽略。

在下面的示例中，無效的類選擇器規則將被忽略，而 h1 仍將得到樣式化。

css

h1 {
  color: blue;
}

..special {
  color: blue;
}

然而，當它們組合在一起時，h1 和類都不會被樣式化，因為整個規則被認為是無效的。

css

h1, ..special {
  color: blue;
}

通用選擇器

通用選擇器由星號 (*) 表示。它選擇文件中的所有內容。如果 * 使用後代組合器連線，它會選擇該祖先元素內的所有內容。例如，p * 選擇 <p> 元素內的所有巢狀元素。

在以下示例中，我們使用通用選擇器移除所有元素的邊距。與瀏覽器預設的透過邊距分隔標題和段落的樣式不同，所有內容都緊密地排列在一起。

html

<h1>Universal selector</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

css

body {
  font-family: sans-serif;
}

* {
  margin: 0;
}

這種行為有時可以在“重置樣式表”中看到，它們會去除所有瀏覽器樣式。由於通用選擇器會進行全域性更改，我們將其用於非常特定的情況，例如下面描述的情況。

使用通用選擇器讓你的選擇器更易讀

通用選擇器的一種用途是使選擇器更易讀，更清晰地表達其作用。例如，如果我們想選擇 <article> 元素的任何後代元素（包括直接子元素），這些元素是其父級的第一個子元素，並將其加粗，我們可以使用 :first-child 偽類。我們將在關於偽類和偽元素的課程中學習更多內容。

css

article :first-child {
  font-weight: bold;
}

然而，這個選擇器可能會與 article:first-child 混淆，後者將選擇作為另一個元素的第一個子元素的任何 <article> 元素。

為了避免這種混淆，我們可以將通用選擇器新增到 :first-child 偽類中，這樣選擇器所做的事情就更明顯了。它選擇的是作為 <article> 元素的第一個子元素的任何元素，或者是 <article> 的任何後代元素的第一個子元素。

css

article *:first-child {
  font-weight: bold;
}

儘管兩者做的事情相同，但可讀性顯著提高。

總結

在本文中，我們回顧了 CSS 選擇器，它使你能夠定位特定的 HTML 元素，並比之前更深入地探討了型別、類和 ID 選擇器。在下一篇文章中，我們將深入探討屬性選擇器。

注意： 有關選擇器的完整列表，請參閱我們的 CSS 選擇器參考。

另見

CSS 類，Scrimba ^{MDN 學習合作伙伴}: 一個提供 CSS 類指導的互動課程。

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者最後修改於 ⁨2025 年 8 月 12 日⁩。

在 GitHub 上檢視此頁面 • 報告此內容的問題