CSS3伪类:target

  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*/
 }

以下通过一个实例来说明

<div id="slidebox">
    <div id="test1" class="test1" length="100">
        <h4 desc="删除">我是一段描述文本</h4>
        <a id="folder" class="down" href="#">关闭</a>
        <a id="collapse" class="up" href="#slidebox">查看</a>
        <p>
            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?
        </p>
    </div>
</div>

配置伪类

    .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;
    }

 

DEMO狂戳这里

扩展阅读：

• https://developer.mozilla.org/en/CSS/:target