元素选择器（+， ~）

最新推荐文章于 2024-04-16 03:29:12 发布

weixin_30699831

最新推荐文章于 2024-04-16 03:29:12 发布

阅读量846

点赞数

原文链接：http://www.cnblogs.com/Mengchangxin/p/10314374.html

版权

元素选择器中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>

CSS---tab切换

转载于:https://www.cnblogs.com/Mengchangxin/p/10314374.html

weixin_30699831

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
元素选择器（+， ~）

元素选择器中w3cschool中有些翻译不太准确比如 +：其实是与element1元素同级，位于element1元素之后的第一个element2元素 ~：其实是与element1元素同级，位于element1元素之后的所有element2元素1. 资料 1 <!DOCTYPE html> 2 <html ...
复制链接

扫一扫