blob: fc03ea200e0dc4fb5f198f57b9346417d540e6f8 (
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
134
135
|
---
title: ':default'
slug: 'Web/CSS/:default'
translation_of: 'Web/CSS/:default'
---
<div>{{CSSRef}}</div>
<p> <strong><code>:default</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> 表示一组相关元素中的默认表单元素。</p>
<p>该选择器可以在 {{htmlelement("button")}}, <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, 以及 {{htmlelement("option")}} 上使用。</p>
<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Selects any default <input> */</span>
<span class="selector token">input<span class="pseudo-class token">:default</span> </span><span class="punctuation token">{</span>
<span class="property token">background-color</span><span class="punctuation token">:</span> lime<span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>
<p>允许多个选择的分组元素也可以具有多个默认值，即，它们可以具有最初选择的多个项目。在这种情况下，所有默认值都使用 <code>:default</code> 伪类表示。例如，您可以在一组复选框之间设置默认复选框。</p>
<h2 id="语法">语法</h2>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><input type="radio" name="season" id="spring">
<label for="spring">Spring</label>
<input type="radio" name="season" id="summer" checked>
<label for="summer">Summer</label>
<input type="radio" name="season" id="fall">
<label for="fall">Fall</label>
<input type="radio" name="season" id="winter">
<label for="winter">Winter</label></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">input:default {
box-shadow: 0 0 2px 1px coral;
}
input:default + label {
color: coral;
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('示例')}}</p>
<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('HTML WHATWG', '#selector-default', ':default')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>无变化</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>定义了HTML语义和规范验证</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>无变化</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>定义了伪类，但不关联伪类</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</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>10.0</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>{{CompatNo}}</td>
<td>10.0</td>
<td>5.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>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>{{CompatGeckoMobile("2.0")}}</td>
<td>{{CompatNo}}</td>
<td>10.0</td>
<td>5.0</td>
</tr>
</tbody>
</table>
</div>
|
