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:;

     left:;

     -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:;

     right:;

     display: inline-block;

     z-index:;

 }

 .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

巴特西

css3-巧用选择器 “:target”

最新文章

热门文章