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标签。


阅读更多
文章标签: CSS 伪类
个人分类: CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭