Skip to content

CSS 通用選取器 *:一次選取所有元素

CSS 通用選取器:選取所有元素

使用 * 符號指定頁面中的所有元素,常用於樣式重置或全域樣式設定。

以下案例便是利用 通用選取器 將幾個不同 HTML 元素的預設樣式都改成相同的視覺呈現。

注意事項

  • 通用選取器可能會影響性能,特別是在大型文檔中使用時。
  • 請謹慎使用,避免對所有元素設定不必要的樣式。

常見的搭配寫法

css
/* 重置所有元素的預設外距與內距 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 限定範圍:只影響某個容器內的所有元素 */
.card * {
  font-family: inherit;
}

第一段是 樣式重置 最常見的起手式,順便把 區塊模型 改成好算的 border-box

小提醒

通用選取器的 權重,任何一個元素、類別或 ID 選取器都能覆蓋它,很適合放在樣式表最前面當作全站預設值。

常見問題

通用選取器的權重是多少?

零。它不會增加任何 權重,因此後面任何一個元素、類別或 ID 選取器都能輕鬆覆蓋它,很適合放在樣式表最前面當作預設值。

它真的會拖慢效能嗎?

在現代瀏覽器中,單獨使用幾乎沒有影響。要注意的是把它接在複雜結構後面的寫法,那會讓比對範圍變大;一般網站直接使用不必擔心。

通用選取器可以和其他條件搭配嗎?

可以。它能接在其他選取器後面表示某個範圍內的所有元素,也能與 屬性選取器偽類 組合,用來限制作用範圍。

延伸閱讀