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属性需设置为相同的名称才为单选按钮组!
时间: 2024-10-11 15:52:43