CSS 伪元素 (Pseudo-elements)
2010-02-20 11:27
267 查看
CSS 伪元素用于将特殊的效果添加到某些选择器。
CSS 类也可以与伪元素配合使用:
在上面的例子中,浏览器显示根据 first-line 伪元素格式化的第一行。浏览器是依靠浏览器窗口的尺寸来进行分行的。
提示:first-line 伪元素仅能被用于块级元素。
提示:下面的属性可以被应用到 first-line 伪元素。
font 属性
color 属性
background 属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
font 属性
color 属性
background 属性
margin 属性
padding 属性
border 属性
text-decoration
vertical-align (仅当float为none时)
text-transform
line-height
float
clear
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
在上面的例子中,段落的首字母将是字号为 24pt 的红色。首行的其余部分将会是蓝色,而段落的其余部分会是默认的颜色。
下面的样式会在标题之后播放音频:
W3C:“W3C”列的数字显示出属性背景由哪个CSS标准定义(CSS1还是CSS2)。
语法:
伪元素的语法:选择器 : 伪元素 { 属性: 值 }
CSS 类也可以与伪元素配合使用:
选择器 . 类: 伪元素 { 属性: 值 }
:first-line 伪元素
"first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式:p {font-size: 12pt}
p:first-line{color: #0000FF; font-variant: small-caps}[/code]
在上面的例子中,浏览器显示根据 first-line 伪元素格式化的第一行。浏览器是依靠浏览器窗口的尺寸来进行分行的。
提示:first-line 伪元素仅能被用于块级元素。
提示:下面的属性可以被应用到 first-line 伪元素。
font 属性
color 属性
background 属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 伪元素
first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式:p {font-size: 12pt}
p:first-letter{font-size: 200%; float: left}[/code]
font 属性
color 属性
background 属性
margin 属性
padding 属性
border 属性
text-decoration
vertical-align (仅当float为none时)
text-transform
line-height
float
clear
伪元素和 CSS 类
伪元素可以与 CSS 类配合使用:p.article:first-letter{color: #FF0000}[/code]
<p [code]class="article">文章中的一个段落。</p> [/code]
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
多重伪元素
多个伪元素可以配合在一起使用:p{font-size: 12pt;}[/code]
p:first-letter{color: #FF0000; font-size: 24pt;}[/code]
p:first-line{color: #0000FF;}[/code]
在上面的例子中,段落的首字母将是字号为 24pt 的红色。首行的其余部分将会是蓝色,而段落的其余部分会是默认的颜色。
:after 伪元素
after 伪类可用于在某个元素之后插入某些内容。下面的样式会在标题之后播放音频:
h1[code]:after[/code]
{
content: url(beep.wav)
}
伪元素
浏览器支持:IE: Internet Explorer, F: Firefox, N: Netscape。W3C:“W3C”列的数字显示出属性背景由哪个CSS标准定义(CSS1还是CSS2)。
[align=center]伪元素[/align] | [align=center]作用[/align] |
:first-letter | 将特殊的样式添加到文本的首字母 |
:first-line | 将特殊的样式添加到文本的首行 |
:before | 在某元素之前插入某些内容 |
:after | 在某元素之后插入某些内容 |
相关文章推荐
- CSS 伪元素 (Pseudo-elements)(二十一)
- W3School-CSS 伪元素 (Pseudo-elements) 实例
- CSS 伪元素 (Pseudo-elements)
- CSS 伪元素 (Pseudo-elements)
- CSS 笔记五(Combinators/Pseudo-classes/Pseudo-elements)
- 解决使用selenium的这一句driver.findElements(By.cssSelector("XXX"))时,元素id为数字开头会出现报错的问题
- 【CSS】Intermediate7:Pseudo Elements
- [TypeStyle] Style CSS pseudo elements with TypeStyle
- CSS 伪类和伪元素--pseudo
- CSS Pseudo-classes & Pseudo-elements
- [CSS] Target Positional Elements Using *-Of-Type CSS pseudo-classes
- [LeetCode] 347. Top K Frequent Elements 前K个高频元素
- CSS网站元素设计-横向导航
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
- 【css】CSS文档流与块级元素和内联元素
- Block-Level vs. Inline Elements(块级元素和内联元素对比)
- CSS文档流与块级元素(block)内联元素(inline)那点事(转自www.jqueryba.com)
- css-实现元素垂直居中对齐
- 伪类“:before”,“:after”和伪元素“::before”、“::after”-CSS生成内容