【CSS3】選擇器-純css實現輪播
阿新 • • 發佈：2017-11-07
ica 焦點 集合 meta 表示 style disable 設置 :active
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實現輪播