@namespace - CSS(层叠样式表) 编辑
概述
@namespace
是用来定义使用在CSS样式表中的XML命名空间的@规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。@namespace规则通常在处理包含多个namespaces的文档时才有用,比如HTML5里内联的SVG、MathML或者混合多个词汇表的XML。
任何 @namespace
规则都必须在所有的 @charset 和 @import 规则之后, 并且在样式表中,位于其他任何 style declarations 之前。
@namespace
可以用来定义默认命名空间。当定义过默认命名空间后, 所有的通配选择器和类型选择器(但不包括属性选择器,详情看下面的note)都只应用在这个命名空间的元素中。
@namespace
规则也可以用于定义命名空间前缀。当一个通配、类型、属性选择器前面有命名空间前缀修饰时,这个选择器将只匹配那些命名空间与 元素名或属性匹配 的元素。
在 HTML5 中,已知的 foreign elements(“外语元素,比如SVG和math命名空间中的元素”)将被自动加上命名空间。这意味着即使文档中没有任何xmlns属性,HTML元素也将表现的如同他们在XHTML命名空间内 (http://www.w3.org/1999/xhtml
)一样,而 <svg> 和 <math> 元素则将被加上对应的命名空间 (http://www.w3.org/2000/svg
和http://www.w3.org/1998/Math/MathML
).
Note: 在 XML中,除非前缀直接定义在了一个属性上(例如:xlink:href),这个属性就不会有命名空间。换句话说,属性将不会继承其所在元素的命名空间,为了符合这个行为,CSS中的默认命名空间不会加到属性选择器中
语法
/* 默认命名空间 */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";
/* 命名空间前缀 */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
标准语法
@namespace <namespace-prefix>? [ <string> | <url> ];where
<namespace-prefix> = <ident>
示例
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* 匹配所有的XHTML <a> 元素, 因为 XHTML 是默认无前缀命名空间 */
a {}
/* 匹配所有的 SVG <a> 元素 */
svg|a {}
/* 匹配 XHTML 和 SVG <a> 元素 */
*|a {}
规范
规范 | 状态 | 备注 |
---|---|---|
CSS Namespaces Module @namespace | Recommendation | Initial definition |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基础支持 | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 8.0 | 1.0 |
命名空间选择器 (|) | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 8.0 | 3.0 |
特性 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基础支持 | ? | ? | ? | ? | ? | ? |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论