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