css实现tab切换效果

<div class="match-instruction">
			    <div id="tab2" class="mi-cont">奖项设置</div>
			    <div id="tab3" class="mi-cont">评审标准</div>
			    <div id="tab4" class="mi-cont">活动动态</div>
			    <div id="tab1" class="mi-cont active">参赛时间及方式</div>
			    <ul class="mi-tab">
			      <li><a href="#tab1"><span>参赛时间及方式</span></a></li>
			      <li><a href="#tab2"><span>奖项设置</span></a></li>
			      <li><a href="#tab3"><span>评审标准</span></a></li>
			      <li><a href="#tab4"><span>活动动态</span></a></li>
			    </ul>
			  </div>

上面是页面html结构，下面贴css样式代码

<style>
.match-instruction{position:relative; padding-top:1.9rem;}
div[id^="tab"]{color:#fff; display:none;}
#tab1:target,#tab2:target,#tab3:target,#tab4:target{display:block;}
#tab1.active{display:block;}
#tab2:target~#tab1,#tab3:target~#tab1,#tab4:target~#tab1{display:none;}
#tab1:target~.mi-tab li:nth-child(1),#tab2:target~.mi-tab li:nth-child(2),#tab3:target~.mi-tab li:nth-child(3),#tab4:target~.mi-tab li:nth-child(4){z-index:5; margin-top:0;}
#tab1:target~.mi-tab li:nth-child(1):after,#tab2:target~.mi-tab li:nth-child(2):after,#tab3:target~.mi-tab li:nth-child(3):after,#tab4:target~.mi-tab li:nth-child(4):after{border-bottom-width:1.9rem;}
#tab1:target~.mi-tab li a[href="#tab1"],#tab2:target~.mi-tab li a[href="#tab2"],#tab3:target~.mi-tab li a[href="#tab3"],#tab4:target~.mi-tab li a[href="#tab4"]{height:1.9rem; line-height:2.05rem;}
.mi-tab{height:1.9rem; position:absolute; left:0; top:0; right:0; margin-right:.8rem;}
.mi-tab li{float:left; width:31%; position:relative; background-color:#77c8df; z-index:4; margin-top:.3rem;}
.mi-tab li+li{width:23%; z-index:3; background-color:#a2ca64;}
.mi-tab li+li+li{z-index:2; background-color:#f0c55e;}
.mi-tab li+li+li+li{z-index:1; background-color:#90c89f;}
.mi-tab li:after{content:""; position:absolute; right:-.8rem; bottom:0; width:0; height:0; border-right:.8rem solid transparent; border-bottom:1.6rem solid #77c8df;}
.mi-tab li+li:after{border-bottom-color:#a2ca64;}
.mi-tab li+li+li:after{border-bottom-color:#f0c55e;}
.mi-tab li+li+li+li:after{border-bottom-color:#90c89f;}
.mi-tab a{display:block; height:1.6rem; line-height:1.75rem; font-size:.65rem; color:#373534; text-align:center; margin-right:-.4rem;}
.mi-tab a span{position:relative; z-index:1;}
.mi-tab li:first-child{z-index:5; margin-top:0;}
.mi-tab li:first-child:after{border-bottom-width:1.9rem;}
.mi-tab li:first-child a{height:1.9rem; line-height:2.05rem;}
#tab2:target~.mi-tab li:first-child,#tab3:target~.mi-tab li:first-child,#tab4:target~.mi-tab li:first-child{z-index:4; margin-top:.3rem;}
#tab2:target~.mi-tab li:first-child:after,#tab3:target~.mi-tab li:first-child:after,#tab4:target~.mi-tab li:first-child:after{border-bottom-width:1.6rem;}
#tab2:target~.mi-tab li:first-child a,#tab3:target~.mi-tab li:first-child a,#tab4:target~.mi-tab li:first-child a{height:1.6rem; line-height:1.75rem;}
</style>

这个css实现tab切换效果在实际项目中并不实用，这里只是单纯的提供一种css实现方案，效果如下图