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属性需设置为相同的名称才为单选按钮组!

  • 相关阅读:
    spark学习进度18(SparkSQL读写)
    查看及修改centos的系统时间
    第3章 串
    linux就该这么学 简介
    1 快速入门
    rocketMQ实战与原理解析 简介
    绪论
    数据结构java版 第4版 叶核亚著 简介
    数据结构java语言版 简介
    数据结构与问题求解java版 简介
  • 原文地址:https://www.cnblogs.com/qiuyueding/p/7798858.html
Copyright © 2011-2022 走看看