css3-巧用選擇器 “:target”

今天（昨天）又發現一個知識盲區

css3的：target標簽，之前學習的時候就是一眼掃過，說是認識了，但其實也就記了三分鍾，合上書就全忘光了。

直到昨天，遇到一個有意思的題目，用css3新特性做一個類似tab標簽的小效果，才讓我又重新認識了  ：target  選擇器

 

w3c上對於target選擇器的解釋是：

試一下他的效果就能對target的作用明白了：http://www.w3school.com.cn/tiy/t.asp?f=css_sel_target

原理： 也就是給一個元素A設定id，另一個元素B指定跳轉到這個id，然后就向 a:hover 那樣，在css中設定 “元素：target”並改變樣式，那么點擊B元素，就會根據你的設定改變A的樣式。

以下就是我根據原理做出來的一個樣式

很明顯，就是一個tab切換效果，css制作。

代碼如下：

html

    <div class="swiper-box">
        <div class="swiper-cont">
            <div class="swiper1" id="swiper1">
            </div>
            <div class="swiper2" id="swiper2">
            </div>
            <div class="swiper3" id="swiper3">
            </div>
        </div>
        <div class="swiper-num">
            <a href="#swiper1">1</a>
            <a href="#swiper2">2</a>
            <a href="#swiper3">3</a>
        </div>
    </div>

css

.swiper-box{
 position: relative;
 width: 500px;
 height: 300px;
 margin: 20px auto;
 background: #f1f1f1;
}
.swiper-cont div,.swiper1,.swiper2,.swiper3{
 width: 0%;
 height: 300px;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transition: width .5s linear;
 -moz-transition: width .5s linear;
 -ms-transition: width .5s linear;
 -o-transition: width .5s linear;
 transition: width .5s linear;
}
.swiper1{
 background: -webkit-linear-gradient(bottom, #fba555, #ffed6c 75%);
 background: -moz-linear-gradient(bottom, #fba555, #ffed6c 75%);
 background: -ms-linear-gradient(bottom, #fba555, #ffed6c 75%);
 background: -o-linear-gradient(bottom, #fba555, #ffed6c 75%);
 background: linear-gradient(to top, #fba555, #ffed6c 75%);
}
.swiper2{
 background: -webkit-linear-gradient(right, #55d5fb, #fd74a7 75%);
 background: -moz-linear-gradient(right, #55d5fb, #fd74a7 75%);
 background: -ms-linear-gradient(right, #55d5fb, #fd74a7 75%);
 background: -o-linear-gradient(right, #55d5fb, #fd74a7 75%);
 background: linear-gradient(to left, #55d5fb, #fd74a7 75%);
}
.swiper3{
 background: -webkit-linear-gradient(bottom right, #55fb69, #6cfff1 75%);
 background: -moz-linear-gradient(bottom right, #55fb69, #6cfff1 75%);
 background: -ms-linear-gradient(bottom right, #55fb69, #6cfff1 75%);
 background: -o-linear-gradient(bottom right, #55fb69, #6cfff1 75%);
 background: linear-gradient(to top left, #55fb69, #6cfff1 75%);
}
.swiper-num{
 position: absolute;
 bottom: 0;
 right: 0;
 display: inline-block;
 z-index: 9;
}
.swiper-num a{
 display: inline-block;
 margin-left: 10px;
 padding: 10px 20px;
 color: #333;
 font-size: 14px;
 text-decoration: none;
 font-weight: bold;
 background: rgba(255,255,255,.45);
}
.swiper-num a:hover,.swiper-num a:active{
 color: red;
 cursor: pointer;
 background: rgba(255,255,255,.95);
}
.swiper-box :target{
 width: 100%;
 -webkit-transition: width .5s linear;
 -moz-transition: width .5s linear;
 -ms-transition: width .5s linear;
 -o-transition: width .5s linear;
 transition: width .5s linear;
}
.in-cont{
 height: 60px;
}

核心關鍵點我覺得除了第63行的：target選擇器以外，還有就是，所謂的指定target目標id的元素，也就是使用了(href=“#xxx”)屬性的元素，一定要是a鏈接，（比如我div.swiper-num里邊的a鏈接就是zhongdian！！！）

曾經我用span，然后搗鼓到了晚上八點最后明白需要a后才下班。。。

難道href是a的御用嗎

 

 

 

 

更多的技巧這篇文章做的很仔細：http://www.css88.com/archives/6256