【CSS3】选择器-纯css实现轮播

时间：2017-11-07 16:16:02 阅读：393 评论：0 收藏：0 [点我收藏+]

标签：名称 back 切换空格 -- 文字 width 利用 char

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实现轮播

标签：名称 back 切换空格 -- 文字 width 利用 char

原文地址：http://www.cnblogs.com/qiuyueding/p/7798858.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行