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
134
135
136
137
138
139
140
141
142
|
---
title: 通配选择器
slug: Web/CSS/Universal_selectors
tags:
- CSS
- Selectors
- 选择器
translation_of: Web/CSS/Universal_selectors
---
<p>{{ CSSRef() }}</p>
<h2 id="概述">概述</h2>
<p>在CSS中,一个星号(<code>*</code>)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,<code>*.warning</code> 和<code>.warning</code> 的效果完全相同.</p>
<p>在CSS3中,星号(<code>*</code>)可以和命名空间组合使用:</p>
<ul>
<li><code>ns|*</code> - 会匹配<code>ns</code>命名空间下的所有元素</li>
<li><code>*|*</code> - 会匹配所有命名空间下的所有元素</li>
<li><code>|*</code> - 会匹配所有没有命名空间的元素</li>
</ul>
<h2 id="Examples" name="Examples">示例</h2>
<pre class="brush: css">*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}
</pre>
<p>上面的CSS作用于下面的HTML:</p>
<pre class="brush: html"><p class="warning">
<span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
<span class="warning">A red span</span> in a green paragraph.
</p>
</pre>
<p>则会产生这样的效果:</p>
<p><span style="color: rgb(0, 255, 0);">A green span</span><span style="color: rgb(255, 0, 0);"> in a red paragraph.</span></p>
<p style="border: 1px solid blue;"><span style="color: rgb(255, 0, 0);">A red span</span><span style="color: rgb(0, 255, 0);"> in a green paragraph (with a border.)</span></p>
<div class="note">注: 笔者不推荐使用通配选择器,因为它是<a class="external" href="http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/">性能最低的一个CSS选择器</a>.</div>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="external" href="http://www.w3.org/TR/css3-selectors/#universal-selector">CSS Selectors Level 3</a></td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>定义了在命名空间下的行为并提示在伪元素中忽略它是允许的</td>
</tr>
<tr>
<td><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#universal-selector">CSS 2.1</a></td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>初始定义</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>7</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td>Combination with namespace support</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>9</td>
<td>8</td>
<td>1.3</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</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>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Combination with namespace support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="相关链接">相关链接</h2>
|
