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
|
---
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>
{{Compat("css.selectors.first-letter")}}
<h2 id="参见">参见</h2>
<ul>
<li>{{cssxref("::first-line")}} 伪元素.</li>
</ul>
|
