CSS 通用選擇器指南

什么是通用選擇器？

CSS 通用選擇器（*）是一種特殊的選擇器，用于匹配頁面中的所有元素。它不區(qū)分元素類型，適用于任何 HTML 元素。

語法

通用選擇器的語法非常簡單，只需使用一個星號（*）即可。

* {
  /* 屬性聲明 */
}

示例

/* 為所有元素設(shè)置文本顏色為綠色 */
* {
  color: green;
}

命名空間支持

通用選擇器支持命名空間，這在處理包含多種命名空間的文檔（如 HTML 中嵌入的 SVG 或 MathML）時非常有用。

• ns|* - 匹配命名空間 ns 中的所有元素。
• *|* - 匹配所有元素。
• |* - 匹配所有沒有聲明命名空間的元素。

示例代碼

/* 選擇所有帶有 lang 屬性以 "zh" 開頭的元素 */
* [lang^="zh"] {
  color: green;
}

/* 選擇所有 class 為 warning（警告） 的元素 */
*.warning {
  color: red;
}

/* 選擇 id 為 maincontent（主要內(nèi)容） 的元素 */
*#maincontent {
  border: 1px solid blue;
}

/* 為具有 floating（浮動） 類的元素設(shè)置左浮動 */
.floating {
  float: left;
}

/* 自動清除浮動元素的下一個兄弟元素 */
.floating + * {
  clear: left;
}

HTML 示例

<p class="warning">
  <span lang="zh-cn">一個綠色的 span</span> 在一個紅色的段落中。
</p>
<p id="maincontent" lang="zh-cn">
  <span class="warning">一個紅色的 span</span> 在一個綠色的段落中。
</p>

命名空間示例

@namespace example url(http://www.example.com/);
example|* {
  color: blue;
}

規(guī)范

• Selectors Level 4: The Universal Selector

瀏覽器兼容性

通用選擇器在所有現(xiàn)代瀏覽器中都得到了廣泛支持，包括 Chrome、Firefox、Safari、Edge 和 Internet Explorer。

編程獅相關(guān)課程推薦

如果你想深入學(xué)習(xí) CSS，可以查看編程獅上的 CSS 入門課程，這些課程涵蓋了 CSS 的基礎(chǔ)知識到高級技巧，幫助你全面提升 CSS 技能。