blob: f521da521ae0947c2a33780c94572b2cf37e6eef (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: '@namespace'
slug: Web/CSS/@namespace
tags:
- '@规则'
- CSS
translation_of: Web/CSS/@namespace
---
<p>{{CSSRef}}</p>
<h2 id="概述">概述</h2>
<p><span class="seoSummary"><strong><code>@namespace</code></strong> </span>是用来定义使用在CSS样式表中的XML命名空间的@规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。<strong>@namespace</strong>规则通常在处理包含多个namespaces的文档时才有用，比如HTML5里内联的SVG、MathML或者混合多个词汇表的XML。</p>
<p>任何 <code>@namespace</code> 规则都必须在所有的 <a href="/en-US/docs/Web/CSS/%40charset">@charset</a> 和 <a href="/en-US/docs/Web/CSS/%40import">@import</a> 规则之后, 并且在样式表中，位于其他任何 <a href="/en-US/docs/Web/API/CSSStyleDeclaration">style declarations</a> 之前。</p>
<p><code>@namespace</code> 可以用来定义默认命名空间。当定义过默认命名空间后, 所有的通配选择器和类型选择器（但不包括属性选择器，详情看下面的note）都只应用在这个命名空间的元素中。</p>
<p><code>@namespace</code> 规则也可以用于定义<strong>命名空间前缀。</strong>当一个通配、类型、属性选择器前面有命名空间前缀修饰时，这个选择器将只匹配那些命名空间与 元素名或属性匹配 的元素。</p>
<p>在 <a href="/en-US/docs/Glossary/HTML5">HTML5</a> 中，已知的 <a href="https://html.spec.whatwg.org/#foreign-elements">foreign elements</a>(“外语元素，比如SVG和math命名空间中的元素”)将被自动加上命名空间。这意味着即使文档中没有任何xmlns属性，HTML元素也将表现的如同他们在XHTML命名空间内 (<code>http://www.w3.org/1999/xhtml</code>)一样，而 <a href="/en-US/docs/Web/SVG/Element/svg"><svg></a> 和 <a href="/en-US/docs/Web/MathML/Element/math"><math></a> 元素则将被加上对应的命名空间 (<code>http://www.w3.org/2000/svg</code> 和<code>http://www.w3.org/1998/Math/MathML</code>).</p>
<div class="note">
<p><strong>Note:</strong> 在 XML中，除非前缀直接定义在了一个属性上（例如：xlink:href），这个属性就不会有命名空间。换句话说，属性将不会继承其所在元素的命名空间，为了符合这个行为，CSS中的默认命名空间不会加到属性选择器中</p>
</div>
<h2 id="语法">语法</h2>
<pre class="brush: css">/* 默认命名空间 */
@namespace url(<em>XML-namespace-URL</em>);
@namespace "<em>XML-namespace-URL</em>";
/* 命名空间前缀 */
@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>);
@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre>
<h3 id="标准语法">标准语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<pre class="brush: css">@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 {}
</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
<td>{{Spec2('CSS3 Namespaces')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>特性</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>基础支持</td>
<td>{{CompatChrome(1.0)}}</td>
<td>{{ CompatGeckoDesktop(1.0) }}</td>
<td>9.0</td>
<td>8.0</td>
<td>1.0</td>
</tr>
<tr>
<td>命名空间选择器 (|)</td>
<td>{{CompatChrome(1.0)}}</td>
<td>{{ CompatGeckoDesktop(1.0) }}</td>
<td>9.0</td>
<td>8.0</td>
<td>3.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>特性</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>基础支持</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
|
