css3-选择器(属性选择器)
[att] 匹配所有具有att属性的
[att=val] 匹配所有att属性等于“val”的
[att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一个完整词)
[att|=val] 匹配所有att属性以val-' 开头的或等于“val”（比如说zh-cn）
[att*=val] 匹配所有att属性 包含'val'的 (val可以是字母)
[att^=val] 匹配所有att属性 'val'开头的
[att$=val] 匹配所有att属性 'val'结束的
css3选择器---结构性伪类
E:nth-child(n) 表示E父级的第n个子节点
E:nth-last-child(n) 表示E父级中的第n个字节点，从后向前计算
e~n相对应的关系
------>（需E选择器能选中此元素）
E:nth-of-type(n) 表示E父级中的第n个字节点，
E:nth-last-of-type(n) 表示E父级中的第n个字节点，从后向前计算
------->（需E选择器能选中此元素,且区分标签类型）
E:nth-child(odd) 匹配奇数行 同p:nth-child(2n-1)
E:nth-child(even) 匹配偶数行 同p:nth-child(2n)
E:empty 表示E元素中没有子节点（不能有空格,回车）。注意：子节点包含文本节点
css3伪类
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元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="作者">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>wq轮播</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:14px 'MIcrosoft yahei';}
.clearfix:after{content:'';display:block;clear:both;}
.fl{float:left;}
.fr{float:right;}
.box{
width:800px;
height:400px;
margin:50px auto;
border:1px solid red;
position:relative;
}
.box .botton{
width:100%;
text-align:center;
position:absolute;
bottom:0;
opacity:0.5;
}
.box .botton label{
display:inline-block;
width:32px;
height:32px;
border-radius:50%;
line-height:32px;
text-align:center;
background:#efefef;
font-size:22px;
}
input{
border:1px solid red;
background:red;
margin:20px auto;
display:none;
}
input#radio1:checked ~ .botton label:nth-child(1){
background-color: red;
color:#fff;
}
input#radio2:checked ~ .botton label:nth-child(2){
background-color: red;
color:#fff;
}
input#radio3:checked ~ .botton label:nth-child(3){
background-color: red;
color:#fff;
}
input#radio4:checked ~ .botton label:nth-child(4){
background-color: red;
color:#fff;
}
input#radio5:checked ~ .botton label:nth-child(5){
background-color: red;
color:#fff;
}
ul li{
list-style:none;
display:none;
text-align:center;
}
input#radio1:checked ~ ul li:nth-child(1){
display:block;
}
input#radio2:checked ~ ul li:nth-child(2){
display:block;
}
input#radio3:checked ~ ul li:nth-child(3){
display:block;
}
input#radio4:checked ~ ul li:nth-child(4){
display:block;
}
input#radio5:checked ~ ul li:nth-child(5){
display:block;
}
</style>
</head>
<body>
<div class="box">
<input type="radio" name=" "id="radio1"value="" checked/>
<input type="radio" name=" "id="radio2"value=""/>
<input type="radio" name=" "id="radio3"value=""/>
<input type="radio" name=" "id="radio4"value=""/>
<input type="radio" name=" "id="radio5"value=""/>
<div class="botton">
<label for="radio1">1</label>
<label for="radio2">2</label>
<label for="radio3">3</label>
<label for="radio4">4</label>
<label for="radio5">5</label>
</div>
<ul>
<li><img src="images/1.jpg" width="" height="" border="0" alt=""></li>
<li><img src="images/2.jpg" width="" height="" border="0" alt=""></li>
<li><img src="images/3.jpg" width="" height="" border="0" alt=""></li>
<li><img src="images/4.jpg" width="" height="" border="0" alt=""></li>
<li><img src="images/5.jpg" width="" height="" border="0" alt=""></li>
</ul>
</div>
</body>
</html>