结构伪类选择器、动画

结构伪类选择器

元素类型必须一样

​
- ele:first-child{ } 选择一组相同元素中的第一个元素
​
- ele:last-child{ } 选择一组相同元素中的最后一个元素
​
- ele:nth-child(n){ } 选择一组相同元素中的第n个元素，n可以是数值、关键词、表达式
​
  - 数值
  - 关键词：odd(奇数)|even(偶数)
  - 表达式：2n(偶数)|2n+1(奇数)
​
  **备注: 以上元素类型必须一样** 
​
  顺序是从上往下数
​
​
    /* 
    first   第一个
    child  孩子、元素
    */
    /* 选择.wrap里的 div标签中的第一个 */
    .wrap div:first-child {
      background-color: tomato;
    }
​
​
    /* 选择.wrap里的 div标签中的最后一个 */
    /* 
    last  最后一个
     */
    .wrap div:last-child {
      background-color: orange;
    }
​
​
    /* 选择.box里p标签中的第一个p标签 */
    .box p:first-child {
      background-color: yellow;
    }
​
    /* 选择.box里p标签中的最后个p标签 */
    .box p:last-child {
      background-color: yellowgreen;
    }
​
​
    /* 第几个 ele:nth-child(n){ } 选择一组相同元素中的第n个元素，
    n可以是数值、关键词、表达式 */
    /* 
    nth-child :第几个孩子
    （）写数字
​
     */
​
    /* 选择.wrap里div标签中的第2个div标签 */
    /* 第2个 */
    .wrap div:nth-child(2) {
      background-color: purple;
    }
​
    /* 第5个 */
    .wrap div:nth-child(5) {
      background-color: purple;
    }
​
    /* 选择.box里p标签中的第3个p标签 */
    .box p:nth-child(3) {
      color: tomato;
    }
​
​
 /* 顺序中单数p标签 背景色红色 */
    /* 关键词 */
    /* odd奇数 */
    .wrap p:nth-child(odd) {
      /* background-color: red; */
    }
​
    /* 顺序中偶数p标签 背景色蓝色 */
    /* even偶数 */
    .wrap p:nth-child(even) {
      /* background-color: blue; */
    }
​
​
    /* 表达式 */
    /* 顺序中单数p标签 背景色红色 */
    /* 2n+1奇数 */
    .wrap p:nth-child(2n+1) {
      background-color: red;
    }
​
    /* 顺序中偶数p标签 背景色蓝色 */
    /* 2n偶数 */
    .wrap p:nth-child(2n) {
      background-color: blue;
    }

元素类型可以不一样

- ele:first-of-type 选择一组元素中特定类型的第一个子元素
- ele:last-of-type 选择一组元素中特定类型的最后一个子元素
- ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素
​
  顺序是从上往下数
​
**备注 : 以上元素类型可以不一样** 
​
​
了解：
child一组与of-type一组的区别
​
- nth-child强调结构关系，查找子元素中的第几个
- nth-of-type强调类型，查找类型中的第几个
​
​
​
/* 选择.wrap元素中 p标签类型中的第一个元素 */
    /*
     type 类型
    
    */
    .wrap p:first-of-type {
      background-color: tomato;
    }
​
    /* 选择.wrap元素中 h2标签类型中的第一个元素 */
    .wrap h2:first-of-type {
      background-color: yellow;
    }
​
    /*
    选不上  类型不一样
     .wrap h2:first-child {
      background-color: yellow;
    } 
    */
    /* 选择.wrap元素中 sapn标签类型中的第一个元素 */
    .wrap span:first-of-type {
      background-color: purple;
    }
​
    /*
      选不上  类型不一样
     .wrap span:first-child {
      background-color: purple;
    }
     */
​
​
    /* 选择.wrap元素中 sapn标签类型中的最后一个元素 */
    .wrap span:last-of-type {
      font-size: 50px;
    }
​
    .wrap p:last-of-type {
      color: aqua;
    }
​
    .wrap h2:last-of-type {
      color: yellowgreen;
    }
​
​
    /*  选择.wrap元素中 sapn标签类型中第2个span元素 */
    .wrap span:nth-of-type(2) {
      color: brown;
    }
​
    .wrap span:nth-of-type(3) {
      color: tomato;
    }
​
    .wrap h2:nth-of-type(1) {
      color: tomato;
    }

动画

1、定义关键帧

@keyframes 动画名称（英文） {
            0% {
                /* 动画的开始 */
            }
​
            25% {
                /* 在25%的时候进行的一个动画 */
            }
​
            50% {
                /* 在50%的时候进行的一个动画 */
            }
​
            100% {
                /* 动画结束 */
            }
​
        }
​
    from,to表示开始、结束状态，也可以使用0%,100%定义
​
        @keyframes 动画名称（英文） {
            from {
                /* 动画开始 */
            }
​
            to {
                /* 动画结束 */
            }
        }
        

2、引用帧动画

 animation: name duration timing-function delay iteration-count;
 animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 
​
   注意：动画名称和动画执行时间必须写，否则动画无效
​
        1.animation-name 动画名称 是定义关键帧是所定义的动画名称
​
        2.animation-duration 动画的执行时间  单位：s/ms
​
        3.animation-timing-function 规定动画运动的速度曲线
           1.linear 相同的速度从开始到结束，也就是匀速
           2.ease  默认值 慢速度开始--速度变快--慢速度结束
           3.ease-in 慢速度开始的过渡效果，也就是以低速度开始
           4.ease-out 慢速度结束的过渡效果，也就是以低速结束
           5.ease-in-out 以慢速度开始和结束的过渡效果
​
        4.animation-delay 定义动画何时开始 
           单位：s/ms
            取值
            - 以秒或毫秒计
            - 默认值是 0
         
​
        5.animation-iteration-count 动画的执行次数
           1.n 默认执行动画次数1次
           2.infinite 无限次播放动画
​
        6.animation-direction 定义是否应该轮流反向播放动画
           1.normal 默认值，正常播放
           2.alternate 动画轮流反向播放
           3.alternate-reverse 从第一次就反向运动
​
  
                
          8.animation-play-state: paused;动画播放方式   暂停
                取值：
                running:运动 
                paused: 暂停
​
​