摘要：
元素选择器中w3cschool中有些翻译不太准确比如+：其实是与element1元素同级，位于element1元素之后的第一个element2元素~：其实是与element1元素同级，位于element1元素之后的所有element2元素1.资料1234567Document89body,p{margin:0;}10h2{margin:0;font-size:100%;}11ul{margin:0;padding:0;list-style:none;}12input{margin:0;width:0;}13a{text-decoration:none;color:inherit;}14.box{width:572px;border:1pxsolid#999;overflow:hidden;}15.nav{margin-left:-1px;font:14px"微软雅黑";overflow:hidden;background-color:#f1f1f1;}16.navI{float:left;width:33.333%;box-sizing:border-box;}17.navI-tit{display:block;line-height:40px;text-align:center;cursor:pointer;border-left:1pxsolid#cecece;border-bottom:1pxsolid#cecece;}18.navI-txt{position:relative;width:572px;height:200px;text-indent:2em;line-height:2;background:#fff;}19.ml1{margin-left:-100%;}20.ml2{margin-left:-200%;}21/*重点代码*/22.navI-radio{display:none;}23.navI-radio:checked+.navI-tit{background:#fff;border-bottom:none;}24.navI-radio:checked~.navI-txt{z-index:1;background-color:white}25262728293031323334课程35课程内容36373839学习计划40学习计划内容41424344技能图谱45技能图谱内容4647484950CSS---tab切换
元素选择器中w3cschool中有些翻译不太准确
比如 +：其实是与element1元素同级，位于element1元素之后的第一个element2元素
~：其实是与element1元素同级，位于element1元素之后的所有element2元素
1. 资料
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport"content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible"content="ie=edge"> 7 <title>Document</title> 8 <style> 9 body,p{margin:0;} 10 h2{margin:0;font-size:100%;} 11 ul{margin:0;padding:0;list-style:none;} 12 input{margin:0;width:0;} 13 a{text-decoration:none;color:inherit;} 14 .box{width:572px;border:1px solid #999;overflow:hidden;} 15 .nav{margin-left:-1px;font:14px "微软雅黑";overflow:hidden;background-color:#f1f1f1;} 16 .navI{float:left;width:33.333%;box-sizing:border-box;} 17 .navI-tit{display:block;line-height:40px;text-align:center;cursor:pointer;border-left:1px solid #cecece;border-bottom:1px solid #cecece;} 18 .navI-txt{position:relative;width:572px;height:200px;text-indent:2em;line-height:2;background:#fff;} 19 .ml1{margin-left:-100%;} 20 .ml2{margin-left:-200%;} 21 /*重点代码*/ 22 .navI-radio{display:none;} 23 .navI-radio:checked + .navI-tit{background:#fff;border-bottom:none;} 24 .navI-radio:checked ~ .navI-txt{z-index:1;background-color:white} 25 </style> 26 </head> 27 <body> 28 29 30 <div class="box"> 31 <ul class="nav"> 32 <li class="navI"> 33 <input class="navI-radio"name="nav"type="radio"id="kc"checked> 34 <label class="navI-tit"for="kc">课程</label> 35 <p class="navI-txt">课程内容</p> 36 </li> 37 <li class="navI"> 38 <input class="navI-radio"name="nav"type="radio"id="xx"> 39 <label class="navI-tit"for="xx">学习计划</label> 40 <p class="navI-txt ml1">学习计划内容</p> 41 </li> 42 <li class="navI"> 43 <input class="navI-radio"name="nav"type="radio"id="jn"> 44 <label class="navI-tit"for="jn">技能图谱</label> 45 <p class="navI-txt ml2">技能图谱内容</p> 46 </li> 47 </ul> 48 </div> 49 </body> 50 </html>