【CSS3】选择器-小案例：纯css实现轮播

CSS选择器：

基本选择器：

通配符选择器：*；
元素选择器：元素标签；
class选择器：相当于身份证上的名称；
id选择器：相当于身份证号（唯一性）；

多元素组合选择器

多元素选择器 E,F 选择所有E元素或者F元素；
后代选择器 E F 选择所有属于E元素后代的F元素，即E元素的下n级元素F；
子元素选择器 E > F 选择所有E元素的子元素F，即E元素的下一级元素F；
毗邻选择器 E + F 选择所有紧随E元素的同级元素F，即跟在E后面的第一个兄弟元素；

属性选择器

[att] 选择所有具有att属性的元素；
[att=val] 选择所有att属性等于val的元素；
[att~=val] 选择所有att属性包含val或者等于val的元素，val为一个单独的词；
[att|=val] 选择所有att属性为val或者val-开头的元素；
[att1][att2=val] 选择所有拥有att1属性同时具有att2等于val的元素；
[att*=val] 选择所有att属性包含val的元素，val可以为一个词中的一部分；
[att^=val] 选择所有att属性以val开头的元素，val可为一个词中的一部分；
[att$=val] 选择所有att属性以val结束的，val可以为一个词中的一部分；

伪类

伪类选择器:link , :visited , :hover , :active;(可查看上一随笔：伪元素与伪类)
伪元素选择器:before , :after;
E:target 当a标签获取焦点href=""所对应的E元素锚点；
E:disabled 表示不可点击的表单控件；
E:enabled 表示可点击的表单控件；
E:checked 表示已选中的checkbox或radio；
E:first-line 表示E元素集合中的第一行；
E:first-letter 表示E元素中的第一个字符；
E::selection 表示E元素在用户选中文字时；
E:not(selector) 选择非selector选择器的每个元素；
E~F 表示E元素后的所有兄弟F元素。

结构性伪类

E:nth-child(n) 表示E父级的所有子元素集合中的第n个子节点（2n(even)匹配偶数行，2n-1(odd)匹配奇数行）；
E:nth-last-child(n) 表示E父级所有子元素（从后向前）集合中的第n个子节点；
E:nth-of-type(n) 表示E父级的子元素E的集合中第n个节点（区分标签类型）；
E:nth-last-of-type(n) 表示E父级的子元素E（从后向前）集合中的第n个子节点（区分标签类型）；
E:empty 表示E元素中没有子节点（不能有空格、回车），子节点包含文本节点；

采用伪类实现轮播：

  1 <!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>伪类选择器--轮播</title>
  6         <style>
  7             body,ul{margin: 0; padding: 0;}
  8             ul{list-style: none;}
  9             img{border:0;vertical-align: middle;}
 10             .banner{
 11                 position: relative;
 12                 width:375px;
 13                 height: 300px;
 14                 margin: 0 auto;
 15                 border: 1px solid red;
 16             }
 17             .banner input{
 18                 display: none;
 19             }
 20             .banner .btn{
 21                 position: absolute;
 22                 bottom: 0px;
 23                 left: 50%;
 24                 margin-left: -100px;
 25                 width: 200px;
 26                 text-align: center;
 27             }
 28             .btn label{
 29                 display: inline-block;
 30                 width: 25px;
 31                 height: 25px;
 32                 background-color: #ddd;
 33                 border-radius: 50%; 
 34                 text-align: center;
 35                 line-height: 30px;
 36             }
 37             .banner .img{
 38                 position: relative;
 39                 width: 275px;
 40                 height: 275px;
 41                 margin: 0 auto;
 42             }
 43             .img li{
 44                 position: absolute;
 45                 top: 0;
 46                 left: 0;
 47             }
 48             .img li img{
 49                 display: none;
 50             }
 51             .img li:nth-child(1) img{
 52                 display: block;
 53             }
 54             .banner input:nth-child(1):checked ~ .btn label:nth-child(1){
 55                 background-color: red;
 56                 color: #fff;
 57             }
 58             .banner input:nth-child(1):checked ~ .img li:nth-child(1) img{
 59                 display: block;
 60             }
 61             .banner input:nth-child(3):checked ~ .btn label:nth-child(3){
 62                 background-color: red;
 63                 color: #fff;
 64             }
 65             .banner input:nth-child(3):checked ~ .img li:nth-child(3) img{
 66                 display: block;
 67             }
 68             .banner input:nth-child(4):checked ~ .btn label:nth-child(4){
 69                 background-color: red;
 70                 color: #fff;
 71             }
 72             .banner input:nth-child(4):checked ~ .img li:nth-child(4) img{
 73                 display: block;
 74             }
 75             .banner input:nth-child(5):checked ~ .btn label:nth-child(5){
 76                 background-color: red;
 77                 color: #fff;
 78             }
 79             .banner input:nth-child(5):checked ~ .img li:nth-child(5) img{
 80                 display: block;
 81             }
 82             .banner input:nth-child(2):checked ~ .btn label:nth-child(2){
 83                 background-color: red;
 84                 color: #fff;
 85             }
 86             .banner input:nth-child(2):checked ~ .img li:nth-child(2) img{
 87                 display: block;
 88             }
 89         </style>
 90     </head>
 91     <body>
 92         <div class="banner">
 93             <input type="radio" id="radio1" name="radio">
 94             <input type="radio" id="radio2" name="radio">
 95             <input type="radio" id="radio3" name="radio">
 96             <input type="radio" id="radio4" name="radio">
 97             <input type="radio" id="radio5" name="radio">
 98             <div class="btn">
 99                 <label for="radio1" class="btn1">1</label>
100                 <label for="radio2" class="btn2">2</label>
101                 <label for="radio3" class="btn3">3</label>
102                 <label for="radio4" class="btn4">4</label>
103                 <label for="radio5" class="btn5">5</label>
104             </div>
105             <ul class="img">
106                 <li class="img1"><img src="images/6.jpg" alt="img"></li>
107                 <li class="img2"><img src="images/7.jpg" alt="img"></li>
108                 <li class="img3"><img src="images/5.jpg" alt="img"></li>
109                 <li class="img4"><img src="images/7.jpg" alt="img"></li>
110                 <li class="img5"><img src="images/6.jpg" alt="img"></li>
111             </ul>
112         </div>
113     </body>
114 </html>

View Code

效果：

原理：使用input的checked属性来触发img的切换效果（初始默认设置第一个显示，其他隐藏），同时利用label与input的关联性来实现点击事件。注意：input元素组name属性需设置为相同的名称才为单选按钮组！