CSS伪类的使用

伪类的使用常见在连接的颜色改变等。下面简单介绍一下。

a:link{},链接未访问前的样式设置

a:visited{},链接已被访问后的样式设置

a:hover{},鼠标移动到链接上时的样式设置

a:active{},点击链接时的样式设置

a:focus{},链接获取焦点时的样式设置

注意：

     a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

     a:active 必须被置于 a:hover 之后，才是有效的。

例如：

.navbar-right a:hover{color:#FDFDFD;}
.navbar-right a:focus{color:#FDFDFD;}

当鼠标移动到链接上时会显示白色，点击链接后，链接也会显示白色。

:first-child可用于选择元素的第一个子元素（IE6，7，8不支持）

例如：

p:first-child {
  color: red;
} 

上诉样式的意思是在body下匹配第一个<p>元素，设置其颜色为红色。

p > em:first-child{
   font-weight:bold;
}

上面的样式表示：匹配<p>元素下的第一个<em>元素，设置其字体加粗。

p:first-child em{
   font-weight:bold;
}

上面样式表示：匹配第一个<p>元素下所有的<em>元素，并将他们的字体加粗。

:lang向拥有lang属性的元素添加样式

:after在元素内容末尾插入新的内容

:before在元素内容之前插入新的内容

例如：

#intorduce:after {
    content:'...';
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(../image/ellipsis.png) repeat-y;
}

在intorduce对象内容末尾插入省略号，content表示内容，不能识别html标签。