CSS参考手册
选择 | Selectors
::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) |
? |
? |
? |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。