元素选择器 （+， ~）
元素选择器中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>
