一、CSS 伪元素用于向某些选择器设置特殊效果。
1、:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line { color:#ff0000; font-variant:small-caps; }
注释:"first-line" 伪元素只能用于块级元素。
注释:下面的属性可应用于 "first-line" 伪元素:
- font (设置字体属性)
- color (设置文本颜色)
- background
- word-spacing ( 用于汉字,规定段落中的字间距是 25 像素:p{word-spacing:25px;} )
- letter-spacing (用于字母,增加或减少字符间的空白,即字符间距)
- text-decoration (修饰文本)
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
blink | 定义闪烁的文本。 |
inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
- vertical-align (属性设置元素的垂直对齐方式)
- text-transform (属性控制文本的大小写)
- line-height
- clear
2、:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式
注释:"first-letter" 伪元素只能用于块级元素。
注释:下面的属性可应用于 "first-letter" 伪元素:
- font
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (仅当 float 为 none 时)
- text-transform
- line-height
- float
- clear
3、CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1> 元素前面插入一幅图片:
h1:before { content:url(logo.gif); }
4、CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片:
h1:after { content:url(logo.gif); }
二、伪元素消除浮动
有这样一种情形:在一个容器(container)中,有两个浮动的子元素。
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
CSS语句中有一个:after伪选择符,就可以在父容器的尾部自动创建一个子元素。
.clearfix:after {
content: "\0020";
display: block; (确保是独立区块)
height: 0;
clear: both;
}
.clearfix {
zoom: 1; (:after选择符IE 6不支持,添加一条IE 6的独有命令"zoom:1;"激活父元素的"hasLayout"属性,让父元素拥 有自己的布局。IE 6会读取这条命令,其他浏览器则会直接忽略它。)
}
三、伪类
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */