CSS3伪类： target 是很特别属性中的一个.它是用来匹配页面(文档)的URI(用来表示页面资源的统一标识符)指向资源的内部的目标元素(anchor标志符指向的元素).这种URI以'#'结束,anchor标识符和目标元素的Id一致。所以简单点来说就是

target伪类匹配以anchor标识符的值为id的目标元素.比如#number1，target就是用来匹配ID为number1的元素的。

现在在页面中，点击一个ID链接后，页面只会跳转到相应的位置，但是并不会有比较明显的UI标识，使用:target伪类可以像:hover等伪类一样对目标元素定义样式。

 

浏览器支持情况

  IE9+, Chrome 3.0+, firefox, safiri

如何使用呢?

selector:target selector{    /*todo*/ }

以下通过一个实例来说明

     
    
      
        
       
我是一段描述文本
        
       关闭        
       查看        
       
            There is a section for descrption me. that introduct my experience and what my job for?            There is a section for descrption me. that introduct my experience and what my job for?            There is a section for descrption me. that introduct my experience and what my job for?        
    
      
     

配置伪类

.test1 p{
           opacity: 0;        max-height: 100px;        transition: opacity .5s ease-in-out;    }    a{
           position: absolute;        top: 40px;        background-color: #fff;    }    .up{
           z-index: 3;    }    .down{
           z-index: 2;    }    #slidebox:target .up{
           z-index: 1;    }    #slidebox:target #test1 p{
           opacity: 1;    }

 

扩展阅读：