css3屬性選擇器+例項
阿新 • • 發佈：2019-01-08
<!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>