CSS for tab switching effect

<div class= "Match-instruction" >    <div id= "tab2" class= "Mi-cont" > Awards settings </div>    <div id= " Tab3 "class=" Mi-cont "> Review criteria </div>    <div id=" tab4 "class=" Mi-cont "> Event Dynamics </div>    <div ID = "Tab1" class= "Mi-cont active" > Entry time and Method </div>    <ul class= "Mi-tab" >      <li><a href= "# Tab1 "><span> time and manner of entry </span></a></li>      <li><a href=" #tab2 "><span> Awards Settings </span></a></li>      <li><a href= "#tab3" ><span> Review Criteria </span></a ></li>      <li><a href= "#tab4" ><span> Event Dynamics </span></a></li>    < /ul>  </div>

  above is the page HTML structure, the following CSS style code is pasted

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

This CSS Implementation tab switching effect in the actual project is not practical, here is simply to provide a CSS implementation, such as the effect of

CSS for tab switching effect