CSS 伪元素 (Pseudo-elements)
2014-05-09 16:25
363 查看
博主【吕津】在"【悬赏】简单而又费解的问题。"帖子中提出一个问题单而又费解的问题。
http://bbs.csdn.net/topics/390781452?page=1#post-397354104
一个高手的回答令我汗颜,我竟然忘记了有CSS伪元素(记不得何年何月看过了),恍惚间再一次明白CSS是多么的丰富,也更加意识到做好CSS设计并非简单的事情!
网上找些关于CSS伪元素的资料:
http://www.w3school.com.cn/css/css_pseudo_elements.asp
CSS
伪类
CSS
对齐
CSS 伪元素用于向某些选择器设置特殊效果。
伪元素的语法:
CSS 类也可以与伪元素配合使用:
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:
亲自试一试
注释:"first-line" 伪元素只能用于块级元素。
注释:下面的属性可应用于 "first-line" 伪元素:
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
"first-letter" 伪元素用于向文本的首字母设置特殊样式:
亲自试一试
注释:"first-letter" 伪元素只能用于块级元素。
注释:下面的属性可应用于 "first-letter" 伪元素:
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear
伪元素可以与 CSS 类配合使用:
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
[/code]
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
可以结合多个伪元素来使用。
在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示:
亲自试一试
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1> 元素前面插入一幅图片:
亲自试一试
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片:
亲自试一试
W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。
http://bbs.csdn.net/topics/390781452?page=1#post-397354104
一个高手的回答令我汗颜,我竟然忘记了有CSS伪元素(记不得何年何月看过了),恍惚间再一次明白CSS是多么的丰富,也更加意识到做好CSS设计并非简单的事情!
网上找些关于CSS伪元素的资料:
http://www.w3school.com.cn/css/css_pseudo_elements.asp
CSS 伪元素 (Pseudo-elements)
CSS伪类
CSS
对齐
CSS 伪元素用于向某些选择器设置特殊效果。
语法
伪元素的语法:selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用:
selector.class:pseudo-element {property:value;}
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:
实例
p:first-line { color:#ff0000; font-variant:small-caps; }
亲自试一试
注释:"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:first-letter { color:#ff0000; font-size:xx-large; }
亲自试一试
注释:"first-letter" 伪元素只能用于块级元素。
注释:下面的属性可应用于 "first-letter" 伪元素:
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear
伪元素和 CSS 类
伪元素可以与 CSS 类配合使用:[code]p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
[/code]
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
多重伪元素
可以结合多个伪元素来使用。在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示:
p:first-letter { color:#ff0000; font-size:xx-large; }
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
亲自试一试
CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。下面的例子在每个 <h1> 元素前面插入一幅图片:
h1:before { content:url(logo.gif); }
亲自试一试
CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。下面的例子在每个 <h1> 元素后面插入一幅图片:
h1:after { content:url(logo.gif); }
亲自试一试
伪元素
W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。属性 | 描述 | CSS |
---|---|---|
:first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
:first-line | 向文本的首行添加特殊样式。 | 1 |
:before | 在元素之前添加内容。 | 2 |
:after | 在元素之后添加内容。 | 2 |
相关文章推荐
- W3School-CSS 伪元素 (Pseudo-elements) 实例
- CSS 伪元素 (Pseudo-elements)
- CSS 伪元素 (Pseudo-elements)
- CSS 伪元素 (Pseudo-elements)(二十一)
- CSS Pseudo-classes & Pseudo-elements
- CSS 伪类和伪元素--pseudo
- [TypeStyle] Style CSS pseudo elements with TypeStyle
- 解决使用selenium的这一句driver.findElements(By.cssSelector("XXX"))时,元素id为数字开头会出现报错的问题
- 【CSS】Intermediate7:Pseudo Elements
- [CSS] Target Positional Elements Using *-Of-Type CSS pseudo-classes
- CSS 笔记五(Combinators/Pseudo-classes/Pseudo-elements)
- LeetCode 347. Top K Frequent Elements(最频繁的K个元素)
- 浅谈css中一个元素如何在其父元素居中显示
- 在jquery中怎么使用css 类名和id 来获得元素
- EXT 中GRID改变表元素样式CSS集合
- 锋利的jQuery-3--.css()获取和设置元素的数字属性
- CSS 中position:absolute的定位到底是相当于body,还是父级元素的问题
- 设置css元素的位置
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
- css-内联(行内)元素、块元素、margin、padding