CSS伪元素、伪元素消除浮动、伪类

一、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}	/* 选定的链接 */

CSS伪元素、伪元素消除浮动、伪类

猜你喜欢