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元素中没有子节点（不能有空格、回车），子节点包含文本节点；
采用伪类实现轮播：
<!doctype html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>伪类选择器--轮播</title> ???????<style> ???????????body,ul{margin: 0; padding: 0;} ???????????ul{list-style: none;} ???????????img{border:0;vertical-align: middle;} ???????????.banner{ ???????????????position: relative; ???????????????width:375px; ???????????????height: 300px; ???????????????margin: 0 auto; ???????????????border: 1px solid red; ???????????} ???????????.banner input{ ???????????????display: none; ???????????} ???????????.banner .btn{ ???????????????position: absolute; ???????????????bottom: 0px; ???????????????left: 50%; ???????????????margin-left: -100px; ???????????????width: 200px; ???????????????text-align: center; ???????????} ???????????.btn label{ ???????????????display: inline-block; ???????????????width: 25px; ???????????????height: 25px; ???????????????background-color: #ddd; ???????????????border-radius: 50%; ????????????????text-align: center; ???????????????line-height: 30px; ???????????} ???????????.banner .img{ ???????????????position: relative; ???????????????width: 275px; ???????????????height: 275px; ???????????????margin: 0 auto; ???????????} ???????????.img li{ ???????????????position: absolute; ???????????????top: 0; ???????????????left: 0; ???????????} ???????????.img li img{ ???????????????display: none; ???????????} ???????????.img li:nth-child(1) img{ ???????????????display: block; ???????????} ???????????.banner input:nth-child(1):checked ~ .btn label:nth-child(1){ ???????????????background-color: red; ???????????????color: #fff; ???????????} ???????????.banner input:nth-child(1):checked ~ .img li:nth-child(1) img{ ???????????????display: block; ???????????} ???????????.banner input:nth-child(3):checked ~ .btn label:nth-child(3){ ???????????????background-color: red; ???????????????color: #fff; ???????????} ???????????.banner input:nth-child(3):checked ~ .img li:nth-child(3) img{ ???????????????display: block; ???????????} ???????????.banner input:nth-child(4):checked ~ .btn label:nth-child(4){ ???????????????background-color: red; ???????????????color: #fff; ???????????} ???????????.banner input:nth-child(4):checked ~ .img li:nth-child(4) img{ ???????????????display: block; ???????????} ???????????.banner input:nth-child(5):checked ~ .btn label:nth-child(5){ ???????????????background-color: red; ???????????????color: #fff; ???????????} ???????????.banner input:nth-child(5):checked ~ .img li:nth-child(5) img{ ???????????????display: block; ???????????} ???????????.banner input:nth-child(2):checked ~ .btn label:nth-child(2){ ???????????????background-color: red; ???????????????color: #fff; ???????????} ???????????.banner input:nth-child(2):checked ~ .img li:nth-child(2) img{ ???????????????display: block; ???????????} ???????</style> ???</head> ???<body> ???????<div class="banner"> ???????????<input type="radio" id="radio1" name="radio"> ???????????<input type="radio" id="radio2" name="radio"> ???????????<input type="radio" id="radio3" name="radio"> ???????????<input type="radio" id="radio4" name="radio"> ???????????<input type="radio" id="radio5" name="radio"> ???????????<div class="btn"> ???????????????<label for="radio1" class="btn1">1</label> ???????????????<label for="radio2" class="btn2">2</label> ???????????????<label for="radio3" class="btn3">3</label> ???????????????<label for="radio4" class="btn4">4</label> ???????????????<label for="radio5" class="btn5">5</label> ???????????</div> ???????????<ul class="img"> ???????????????<li class="img1"><img src="images/6.jpg" alt="img"></li> ???????????????<li class="img2"><img src="images/7.jpg" alt="img"></li> ???????????????<li class="img3"><img src="images/5.jpg" alt="img"></li> ???????????????<li class="img4"><img src="images/7.jpg" alt="img"></li> ???????????????<li class="img5"><img src="images/6.jpg" alt="img"></li> ???????????</ul> ???????</div> ???</body></html>效果：
原理：使用input的checked属性来触发img的切换效果（初始默认设置第一个显示，其他隐藏），同时利用label与input的关联性来实现点击事件。注意：input元素组name属性需设置为相同的名称才为单选按钮组！
【CSS3】选择器-纯css实现轮播
原文地址：http://www.cnblogs.com/qiuyueding/p/7798858.html