CSS 通用选择器指南

什么是通用选择器？

CSS 通用选择器（*）是一种特殊的选择器，用于匹配页面中的所有元素。它不区分元素类型，适用于任何 HTML 元素。

语法

通用选择器的语法非常简单，只需使用一个星号（*）即可。

* {
  /* 属性声明 */
}

示例

/* 为所有元素设置文本颜色为绿色 */
* {
  color: green;
}

命名空间支持

通用选择器支持命名空间，这在处理包含多种命名空间的文档（如 HTML 中嵌入的 SVG 或 MathML）时非常有用。

• ns|* - 匹配命名空间 ns 中的所有元素。
• *|* - 匹配所有元素。
• |* - 匹配所有没有声明命名空间的元素。

示例代码

/* 选择所有带有 lang 属性以 "zh" 开头的元素 */
* [lang^="zh"] {
  color: green;
}

/* 选择所有 class 为 warning（警告） 的元素 */
*.warning {
  color: red;
}

/* 选择 id 为 maincontent（主要内容） 的元素 */
*#maincontent {
  border: 1px solid blue;
}

/* 为具有 floating（浮动） 类的元素设置左浮动 */
.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;
}

规范

• Selectors Level 4: The Universal Selector

浏览器兼容性

通用选择器在所有现代浏览器中都得到了广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Internet Explorer。

编程狮相关课程推荐

如果你想深入学习 CSS，可以查看编程狮上的 CSS 入门课程，这些课程涵盖了 CSS 的基础知识到高级技巧，帮助你全面提升 CSS 技能。