css3属性选择器+实例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;
}
css选择器分为哪几类
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。