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