::first-line
::first-line伪元素将样式应用于块级元素的第一行。请注意，第一行的长度取决于许多因素，包括元素的宽度，文档的宽度以及文本的字体大小。
::first-line {
color: blue;
text-transform: uppercase;
}只有一小部分css属性可以与::first-line伪元素一同使用：
- 所有字体相关的属性：
font，font-kerning，font-style，font-variant，font-variant-numeric，font-variant-position，font-variant-east-asian，font-variant-caps，font-variant-alternates，font-variant-ligatures，font-synthesis，font-feature-settings，font-language-override，font-weight，font-size，font-size-adjust，font-stretch，和font-family
- 所有的背景相关的属性：
background-color，background-clip，background-image，background-origin，background-position，background-repeat，background-size，background-attachment，和background-blend-mode
color属性
word-spacing，letter-spacing，text-decoration，text-transform，和line-height
text-shadow，text-decoration，text-decoration-color，text-decoration-line，text-decoration-style，和vertical-align。
CSS3引入了::first-line符号（用两个冒号）来区分伪类和伪元素。在CSS2中引入后，浏览器也接受:first-line。
语法
/* CSS3 syntax */
::first-line
/* CSS2 syntax */
:first-line实例
HTML
<p>Styles will only be applied to the first line of this paragraph.
After that, all text will be styled like normal. See what I mean?</p>
<span>The first line of this text will not receive special styling
because it is not a block-level element.</span>CSS
::first-line {
color: blue;
text-transform: uppercase;
/* WARNING: DO NOT USE THESE */
/* Many properties are invalid in ::first-line pseudo-classes */
margin-left: 20px;
text-indent: 20px;
}结果
规范
Specification | Status | Comment |
|---|---|---|
CSS Pseudo-Elements Level 4The definition of '::first-line' in that specification. | Working Draft | Defines more strictly where ::first-letter can occur. Generalizes allowed properties to typesetting, text decoration, and inline layout properties and opacity. Defines the inheritance of ::first-letter. |
CSS Text Decoration Module Level 3The definition of 'text-shadow with ::first-line' in that specification. | Candidate Recommendation | Allows the use of text-shadow with ::first-letter. |
Selectors Level 3The definition of '::first-line' in that specification. | Recommendation | Introduction of the two-colon syntax. |
CSS Level 2 (Revision 1)The definition of '::first-line' in that specification. | Recommendation | No change. |
CSS Level 1The definition of '::first-line' in that specification. | Recommendation | Initial definition, using the one-colon syntax. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | 1.01 | (Yes) | 1.0 (1.7 or earlier) | 9.0 | 7.02 | 1.03 |
Old one-colon syntax (:first-line) | 1.01 | (Yes) | 1.0 (1.7 or earlier) | 5.5 | 3.52 | 1.03 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | (Yes)1 | (Yes) | 1.0 (1) | No support | ? | ? |
Old one-colon syntax (:first-line) | (Yes)1 | (Yes) | 1.0 (1) | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
