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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
---
title: '::first-letter (:first-letter)'
slug: 'Web/CSS/::first-letter'
translation_of: 'Web/CSS/::first-letter'
---
<p>{{ CSSRef() }}</p>
<p id="概述"><a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">伪元素</a> <code>::first-letter</code>会选中某 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">block-level element</a>（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格） 。</p>
<pre><code>/* Selects the first letter of a <p> */
p::first-letter {
font-size: 130%;
}</code></pre>
<p>元素首字符并不总是很容易识别:</p>
<p> </p>
<ul>
<li>首字符之前或紧跟首字符的标点符号在伪元素匹配范围内。标点符号（Punctuation）包括在开（Ps），闭（Pe），初始引用（Pi），结束引用（Pf）当中定义的任何Unicode字符以及其他种类的标点符号（Po）。</li>
<li>另外还会有一些以大写双字母组合命名的语言, 比如荷兰的 <code>IJ </code> . 在这种罕见情况下, 两个大写字母都理应被 <code>::first-letter</code> 伪元素匹配到. (但是浏览器对此支持得很糟糕, 可以用 <a href="/En/CSS/::first-letter#Browser_compatibility" title="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">browser compatibility table</a>进行核实).</li>
<li>{{ cssxref("::before") }} 伪元素 和 {{ cssxref("content") }} 属性结合起来有可能会在元素前面注入一些文本。如此，<code>::first-letter</code> 将会匹配到content文本的首字母。</li>
</ul>
<p>首行只在 <a href="/en/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes" title="https://developer.mozilla.org/en/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">block-container box</a>内部才有意义, 因此 <code>::first-letter</code> 伪元素 只在{{ cssxref("display") }}属性值为block, <code>inline-block</code>, <code>table-cell</code>, <code>list-item</code> 或者 <code>table-caption</code>的元素上才起作用. 其他情况下, <code>::first-letter</code> 毫无意义.</p>
<p> </p>
<h2 id="允许的属性值">允许的属性值</h2>
<p> </p>
<p>只有一小部分CSS可以在包含使用了<code>::first-letter</code> 伪元素选择器的CSS规则集声明块内运用:</p>
<ul>
<li>所有的字体属性 : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} 以及 {{ Cssxref("font-family") }}.</li>
<li>所有的背景属性 : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}以及 {{cssxref("background-blend-mode")}}.</li>
<li>所有的外边距属性: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.</li>
<li>所有的内边距属性: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.</li>
<li>所有的边框属性: 比如一些简短的边框属性 {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, 还剩下许多冗长的边框属性等等.</li>
<li>{{ cssxref("color") }} 属性.</li>
<li>{{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (使用恰当的话), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} <code>注意此刻必须没有浮动</code>) 等属性.</li>
</ul>
<p>当这个列表以后被实现时, 为了保持css不过时.建议你不要在声明块内使用任何其他属性.</p>
<div class="note">
<p>对于 CSS 2, 伪元素采用单冒号前缀语法. 因为伪类也是同样的语法,所以使得两者难以区分. CSS2.1 改变了伪元素的前缀语法可以解决这个问题. 现在伪元素采用双冒号前缀, 并且伪类仍然采用单冒号前缀.</p>
<p>CSS2伪类单冒号语法已得到广泛支持时, 所有支持双冒号的浏览器同样也支持旧的单冒号语法.</p>
<p>考虑浏览器兼容性的话, <code>:first-letter</code> 是一个更有效的选择; 否则, <code>::first-letter</code> 更受欢迎.</p>
</div>
<h2 id="示例">示例</h2>
<pre class="brush: css">/* 使每段开头的第一个字母变红变大 */
p::first-letter { /* 使用:first来兼容IE8- */
color: red;
font-size: 130%;
}
</pre>
<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>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
<td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
<td>允许属性的类型设置, 文本修适和内联布局属性, {{ cssxref("opacity") }} 以及 {{ cssxref("box-shadow") }}.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td>
<td>{{ Spec2('CSS3 Text Decoration')}}</td>
<td>可以对{{cssxref("text-shadow")}} 属性使用 <code>::first-letter</code>.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>定义列表项的特殊行为, 或者是语言特定行为 (比如荷兰的Python). 伪元素的双冒号语法已经介绍过了.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>没有重大改变, 而且 CSS2 仍然使用单冒号语法.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
<td>{{ Spec2('CSS1') }}</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 (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>9.0</td>
<td>7.0</td>
<td>1.0 (85)</td>
</tr>
<tr>
<td>Old one-colon syntax (<code>:first-letter</code>)</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>5.5</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
<tr>
<td>Support for the Dutch digraph <code>IJ</code></td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }} {{ bug("92176") }} </td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</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 Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Old one-colon syntax (<code>:first-letter</code>)</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Support for the Dutch digraph <code>IJ</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="参见">参见</h2>
<ul>
<li>{{cssxref("::first-line")}} 伪元素.</li>
</ul>
|
