zoukankan      html  css  js  c++  java

  • 【CSS3】选择器-小案例：纯css实现轮播

    CSS选择器：

    基本选择器：

    1. 通配符选择器：*；
    2. 元素选择器：元素标签；
    3. class选择器：相当于身份证上的名称；
    4. id选择器：相当于身份证号（唯一性）；

    多元素组合选择器

    1. 多元素选择器 E,F  选择所有E元素或者F元素；
    2. 后代选择器 E F  选择所有属于E元素后代的F元素，即E元素的下n级元素F；
    3. 子元素选择器 E > F 选择所有E元素的子元素F，即E元素的下一级元素F；
    4. 毗邻选择器 E + F 选择所有紧随E元素的同级元素F，即跟在E后面的第一个兄弟元素；

    属性选择器

    1. [att] 选择所有具有att属性的元素；
    2. [att=val] 选择所有att属性等于val的元素；
    3. [att~=val] 选择所有att属性包含val或者等于val的元素，val为一个单独的词；
    4. [att|=val] 选择所有att属性为val或者val-开头的元素；
    5. [att1][att2=val] 选择所有拥有att1属性同时具有att2等于val的元素；
    6. [att*=val] 选择所有att属性包含val的元素，val可以为一个词中的一部分；
    7. [att^=val] 选择所有att属性以val开头的元素，val可为一个词中的一部分；
    8. [att$=val] 选择所有att属性以val结束的，val可以为一个词中的一部分；

    伪类

    1. 伪类选择器:link , :visited , :hover , :active;(可查看上一随笔：伪元素与伪类)
    2. 伪元素选择器:before , :after;
    3. E:target 当a标签获取焦点href=""所对应的E元素锚点；
    4. E:disabled 表示不可点击的表单控件；
    5. E:enabled 表示可点击的表单控件；
    6. E:checked 表示已选中的checkbox或radio；
    7. E:first-line 表示E元素集合中的第一行；
    8. E:first-letter 表示E元素中的第一个字符；
    9. E::selection 表示E元素在用户选中文字时；
    10. E:not(selector) 选择非selector选择器的每个元素；
    11. E~F 表示E元素后的所有兄弟F元素。

    结构性伪类

    1. E:nth-child(n) 表示E父级的所有子元素集合中的第n个子节点（2n(even)匹配偶数行，2n-1(odd)匹配奇数行）；
    2. E:nth-last-child(n) 表示E父级所有子元素（从后向前）集合中的第n个子节点；
    3. E:nth-of-type(n) 表示E父级的子元素E的集合中第n个节点（区分标签类型）；
    4. E:nth-last-of-type(n) 表示E父级的子元素E（从后向前）集合中的第n个子节点（区分标签类型）；
    5. E:empty 表示E元素中没有子节点（不能有空格、回车），子节点包含文本节点；

    采用伪类实现轮播：

      1 <!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>伪类选择器--轮播</title>
  6         <style>
  7             body,ul{margin: 0; padding: 0;}
  8             ul{list-style: none;}
  9             img{border:0;vertical-align: middle;}
 10             .banner{
 11                 position: relative;
 12                 width:375px;
 13                 height: 300px;
 14                 margin: 0 auto;
 15                 border: 1px solid red;
 16             }
 17             .banner input{
 18                 display: none;
 19             }
 20             .banner .btn{
 21                 position: absolute;
 22                 bottom: 0px;
 23                 left: 50%;
 24                 margin-left: -100px;
 25                 width: 200px;
 26                 text-align: center;
 27             }
 28             .btn label{
 29                 display: inline-block;
 30                 width: 25px;
 31                 height: 25px;
 32                 background-color: #ddd;
 33                 border-radius: 50%; 
 34                 text-align: center;
 35                 line-height: 30px;
 36             }
 37             .banner .img{
 38                 position: relative;
 39                 width: 275px;
 40                 height: 275px;
 41                 margin: 0 auto;
 42             }
 43             .img li{
 44                 position: absolute;
 45                 top: 0;
 46                 left: 0;
 47             }
 48             .img li img{
 49                 display: none;
 50             }
 51             .img li:nth-child(1) img{
 52                 display: block;
 53             }
 54             .banner input:nth-child(1):checked ~ .btn label:nth-child(1){
 55                 background-color: red;
 56                 color: #fff;
 57             }
 58             .banner input:nth-child(1):checked ~ .img li:nth-child(1) img{
 59                 display: block;
 60             }
 61             .banner input:nth-child(3):checked ~ .btn label:nth-child(3){
 62                 background-color: red;
 63                 color: #fff;
 64             }
 65             .banner input:nth-child(3):checked ~ .img li:nth-child(3) img{
 66                 display: block;
 67             }
 68             .banner input:nth-child(4):checked ~ .btn label:nth-child(4){
 69                 background-color: red;
 70                 color: #fff;
 71             }
 72             .banner input:nth-child(4):checked ~ .img li:nth-child(4) img{
 73                 display: block;
 74             }
 75             .banner input:nth-child(5):checked ~ .btn label:nth-child(5){
 76                 background-color: red;
 77                 color: #fff;
 78             }
 79             .banner input:nth-child(5):checked ~ .img li:nth-child(5) img{
 80                 display: block;
 81             }
 82             .banner input:nth-child(2):checked ~ .btn label:nth-child(2){
 83                 background-color: red;
 84                 color: #fff;
 85             }
 86             .banner input:nth-child(2):checked ~ .img li:nth-child(2) img{
 87                 display: block;
 88             }
 89         </style>
 90     </head>
 91     <body>
 92         <div class="banner">
 93             <input type="radio" id="radio1" name="radio">
 94             <input type="radio" id="radio2" name="radio">
 95             <input type="radio" id="radio3" name="radio">
 96             <input type="radio" id="radio4" name="radio">
 97             <input type="radio" id="radio5" name="radio">
 98             <div class="btn">
 99                 <label for="radio1" class="btn1">1</label>
100                 <label for="radio2" class="btn2">2</label>
101                 <label for="radio3" class="btn3">3</label>
102                 <label for="radio4" class="btn4">4</label>
103                 <label for="radio5" class="btn5">5</label>
104             </div>
105             <ul class="img">
106                 <li class="img1"><img src="images/6.jpg" alt="img"></li>
107                 <li class="img2"><img src="images/7.jpg" alt="img"></li>
108                 <li class="img3"><img src="images/5.jpg" alt="img"></li>
109                 <li class="img4"><img src="images/7.jpg" alt="img"></li>
110                 <li class="img5"><img src="images/6.jpg" alt="img"></li>
111             </ul>
112         </div>
113     </body>
114 </html>
    View Code

    效果：

    原理：使用input的checked属性来触发img的切换效果（初始默认设置第一个显示，其他隐藏），同时利用label与input的关联性来实现点击事件。注意：input元素组name属性需设置为相同的名称才为单选按钮组！
  • 相关阅读:
    The Stanford Natural Language Processing Group
    HTTP和Socket
    数据挖掘之R与SQL
    redis运维的一些知识点
    ICTCLAS2011免费发布
    异步IO一定更好吗？
    试用wincvs2.0
    本地访问服务器上的wamp
    如何解决wamp中apache外部IP访问问题
    高级设置电脑系统windows7防火墙出错代码0×6D9原因与解决技巧
  • 原文地址：https://www.cnblogs.com/qiuyueding/p/7798858.html
Copyright © 2011-2022 走看看