CSS 通用選取器 *:一次選取所有元素
使用 * 符號指定頁面中的所有元素,常用於樣式重置或全域樣式設定。
以下案例便是利用 通用選取器 將幾個不同 HTML 元素的預設樣式都改成相同的視覺呈現。
注意事項
- 通用選取器可能會影響性能,特別是在大型文檔中使用時。
- 請謹慎使用,避免對所有元素設定不必要的樣式。
常見的搭配寫法
css
/* 重置所有元素的預設外距與內距 */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 限定範圍:只影響某個容器內的所有元素 */
.card * {
font-family: inherit;
}第一段是 樣式重置 最常見的起手式,順便把 區塊模型 改成好算的 border-box。
小提醒
通用選取器的 權重 是 零,任何一個元素、類別或 ID 選取器都能覆蓋它,很適合放在樣式表最前面當作全站預設值。
常見問題
通用選取器的權重是多少?
零。它不會增加任何 權重,因此後面任何一個元素、類別或 ID 選取器都能輕鬆覆蓋它,很適合放在樣式表最前面當作預設值。
它真的會拖慢效能嗎?
在現代瀏覽器中,單獨使用幾乎沒有影響。要注意的是把它接在複雜結構後面的寫法,那會讓比對範圍變大;一般網站直接使用不必擔心。