CSS伪类

CSS伪类

css中的所有伪类。(还有选择)

简单实例：

 a:link{
     color:red;   /*未访问的连接 */
 }
 a:visited{
     color:green; /*已经的连接*/
 }
 a:hover{
     color:black; /*当鼠标悬浮在连接上的时候*/
 }
 a:active{
     color:yellow;  /*被选中的连接 就是当鼠标按下去（选中） 当还没有抬起*/
 }

这里还要注意一哈顺序：

css定义中；a:hover 必须位于a:link和a:visited之后，才能生效；

css定义中；a:active 必须位于a:hover 之后才能生效；

 input:focus{
     background-color:yellow;
 }

:first-child伪类

如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p:first-child {
    font-weight: bold;
}
p:before{
    content:"-p之前的东西";
    color:green;    
}
p:after {
    content:"-p之后的东西";
    color:red;
}

</style>
</head>

<body>
<P>第一个p</P>
<P>第二个p</P>
<P>第三个p</P>
<P>第四个p</P>

</body>
</html>

为了保证 :first-child 伪类在 IE 中正常工作，必须声明 <!DOCTYPE>。

:after在IE8中运行，必须声明<!DOCTYPE>

接下来继续我们的after和before的学习使用滴呀

需要注意的是：

如果没有我们content属性；伪元素将没有任何作用；同时插入的内容，是一个行内元素；

并且在我们的html代码中是看不到滴呀

我们还可以给content中指定图片

 p:before{
     content:url(images/02.jpg);
     width:100px;
     height:100px;
     display:block;
      
 }
 p:after{
     content:url(images/01.jpg); 
     width:100px;
     height:100px;
     display:block;
 }

你会发现指定的了大小，并没有卵用滴呀，那是因为指定的是content的大小，而不是我们图片的大小滴呀!

将content中内容设置为空，给它添加背景；你就可以理解上面的

 p:before{
     content:" ";
     width:100px;
     height:100px;
     display:inline-block;
     background: url(images/01.jpg);
      
 }
 p:after{
     content:"";
     width:100px;
     height:100px;
     display:inline-block;
     background:url(images/02.jpg);
 }

效果：（这里的display，我用的是：inline-block）

我们还可以在content中，返回指定的属性；

content:attr()

如：

 a:after{ 
   content:attr(href);/*将返回元素指定的属性呀*/
 }

效果：

接下来我们看一些实例滴呀：

实例一：

 div:before{
     content:open-quote;
 }
 div:after{
     content:close-quote;
 }

初级效果：

再加css

div:before {
    content: open-quote;
    font-size: 24px;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: left;
    position: relative;
    left: 0;
    top: 5px;
    height: 25px;
    width: 25px;
    border-radius: 25px;
}
div:after {
    content: close-quote;
    font-size: 24px;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: left;
    position: relative;
    bottom: 2px;
    left: 210px;
    height: 25px;
    width: 25px;
    border-radius: 25px;
}

效果：

更多的经常部分井参考：

http://blog.jobbole.com/49173/