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 技能。