CSS选择器，属性前缀，长度单位，变形效果，过渡效果，动画效果

CSS3选择器

   ·*通配选择器
   ·E标签选择器
   ·E#id ID选择器
   ·E.class类选择器
  ·Ｅ　Ｆ包含选择器，后代选择器
  ·Ｅ＞Ｆ子包含选择器
  ·Ｅ＋Ｆ相邻兄弟选择器
  ·Ｅ【ｆｏｏ】属性选择器
  ·并集选择器

属性选择器

E[att] { sRules }:选择具有att属性的E元素。
E[att="val"] { sRules }:选择具有att属性且属性值等于val的E元素。
E[att~="val"] { sRules }:选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
E[att^="val"] { sRules }:选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] { sRules }:选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] { sRules }:选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"] { sRules }:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

 img**[alt$="3"]**{
            margin: 20px;
        }
` div**[class~="a"]**
        {
          border: 2px solid red;
        }

CSS3结构伪类选择器
-----------
    E：nth-child(n)选择所有在其父元素中第n个位置的匹配E的子元素
    E:nth-last-child(n) { sRules }:匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
    E:nth-of-type(n) { sRules }:匹配同类型中的第n个同级兄弟元素E。
    E:first-child { sRules }:匹配父元素的第一个子元素E。
    E:last-child { sRules }:匹配父元素的最后一个子元素E。
```示例代码：
        li:nth-child(4n){
            color: red;
        }
        li:nth-last-child(2){
            color: blue;
        }
        p:nth-of-type(2){
            color: orange;
        }
        p:nth-last-child(2){
            color: yellow;

CSS3UI状态伪类选择器

 E：emabled:匹配用户界面上处于可用状态的元素E。
 E:disabled:匹配用户界面上处于禁用状态的元素E。
 E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

CSS3其他选择器
E~F
E：not(s)

        input:checked > span{
            color: red;
        }
        input[type="text"]:enabled{
            border: 2px solid blueviolet;
            background-color: yellow;
            color: aqua;
        }
        input[type="text"]:disabled{
            border: 2px solid blueviolet;
            background-color: yellow;
            color: aqua;
        }

CSS3属性前缀

chrome、Safar:-webkit-
Opera:-o-
Firefox:-moz-
Internet Explorer:-ms-

            background-color: orange;
            /*针对谷歌和苹果浏览器*/
            -webkit-border-radius: 50px;
            /*针对欧朋浏览器*/
            -o-border-radius:20px;
            /*针对火狐浏览器*/
            -moz-border-radius:20px ;
            /*针对IE浏览器*/
            -ms-border-radius:50px;

**CSS长度单位**
=======

    EM:与元素字号挂钩
    Rem:与根元素的字号挂钩
    Px:像素、与分辨率挂钩
    %：
    注意：CSS3引入了一些新的尺寸单位，重点推荐的rem（根em），和em和百分比不同的是它不是与父元素挂钩，而是和文档的根元素（html）挂钩。
    em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

    我们在之前的web设计中大量使用了px进行布局，因为早期固定布局使用px较为方便，逐渐养成了这种习惯。
    而使用em单位其实更加灵活，，尤其是在修改样式时，只需要修改一下挂钩元素的哪个大小即可，无须修改每一个元素。
    默认挂钩元素为父元素。

    网页默认字号大小为16px

    em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
       任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
    EM特点
         1. em的值并不是固定的；
         2. em会继承父级元素的字体大小。
       px：为像素单位。它是显示屏上显示的每一个小点，为显示的               最小单位。它是一个绝对尺寸单位；
       em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
       %： 百分比，它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。
      这里需要注意的是：em是相对于应用于当前当前元素的字体尺寸；而百分比则是相对于父元素的尺寸。

CSS3过渡效果一般是通过一些简单的CSS动作出发平滑过渡功能,比如hover,focus,active,checked等
=============================================================

    CSS3通过transition属性完成过渡效果
    transition-property:指定过渡使用的CSS属性
    transition-duration:完成过渡的时间
    transition-timing-function:指定过渡的函数
    transition-delat:指定过渡开始出现的延迟时间
    transform:属性值为变形函数
    translate/translateX/translateY:在水平、垂直或者两个方向上平移元素
    scale/scaleX/scaleY:在水平、垂直或两个方向上缩放元素
    romate:旋转元素，单位deg
    skew/skewX/skewY:使元素倾斜一定的角度
    Transform-origion:指定变形的起点-left
    top
       方位词：-top/bottom/center/left/right

CSS动画
-----
    @keyframes:定义一个动画
    animation:在HTML元素上应用动画-->
    **定义动画**
    @keyframes 动画名称{
       阶段1{CSS样式}
       阶段2{CSS样式}
       阶段3{CSS样式}
       ..... }
       阶段：每个阶段用百分比表示，从0%到100%
       起止必须设置即0%和100%或者from和to-->

       animation-name:动画名称    ***必须指定
       animation-Duration:动画持续时间   ***必须指定
       animation-timing-function:动画速度曲线
       animation-delay:动画开始的时间，延迟
       animation-iteration-count:动画播放次数，默认为1.
               N：播放次数。
               infinite:无限次循环。
       animation-direction:动画在下一个是否逆向播放，默认为normal.
          reverse：反方向运行
          alternate：动画先正常运行再反方向运行，并持续交替运行
          alternate-reverse：动画先反运行再正方向运行，并持续交替运行
       animation-play-state：running：运动 paused： 暂停
       animation-fill-mode:规定对象动画时间之外的状态
              none:不改变默认行为
              forwards:在动画完成后，保持最后的CSS样式
              backwards:在动画完成后，回到最初的CSS样式
              both:向前和向后填充的样式都被应用-->
```示例代码：
 img{
            width: 150px;
            animation: plane 5s ease-in-out infinite ;
        }
        @keyframes plane{
            0%{
                transform: translate(0,0);
            }
            20%{
                transform: translate(100px,200px);
            }
            40%{
                transform: translate(200px,300px);
            }
            60%{
                transform: translate(300px,200px);
            }
            100%{
                transform: translate(500px,500px);
            }
        }