(17.04.28)**css3、js的新选择器

回顾：

css3
    border-radius：


    border-top-left-radius：

-------------------------------------
动画：
    1.transition：时间  改变样式  运动形式

    2.跳变试的动画

        定义动画

        @-webkit-keyframes 动画名{
            0%{}
            30%{}
            100%{}
        } 

------------------------------------------
背景透明：
    background：rgba（0,0,0,0.6）

盒子阴影：
    box-shadow:x轴偏移 y轴偏移量 模糊度 大小 颜色

    inset

文字阴影    
    
    text-shadow：x轴偏移 y轴偏移量 模糊度  颜色

--------------------------------------------------
背景色渐变：
    
    background：-webkit-linear-gradient（方向，颜色 10%，颜色）

    background：-webkit-radial-gradient（方向，形状，颜色 10%，颜色）


-------------------------------------------
蒙版：
    
    和图片用法是一某一样！

---

css3新

transform ：变形的样式

    rotate（45deg）：旋转（默认中心来旋转，顺时针）

    translate(200px,100px)：平移
    x轴平移（正数往右） y轴平移（正数往下）

    scale(1,2)：缩放
        x轴 y轴
（给div加了这个样式，它里面的所有子级也会随着缩放，如果里面是负值，就会倒过来）

注意：
    行内元素不支持次样式！

可以简写，写在一起：
    transform:translate(100px,100px) scale(2) rotate(45deg);

---

原来选择器：

#div{}
.class{}
div{}
div,p,li{}

a:hover{}

css3选择器：

属性选择器：

    input[type=text]{ background:red;}
    input[value=bbb]{ background:red;}

    *[type]{ background:blue;}
    *[title]{ background:blue;}

    div[title~=apple]{ background:red;}


    1. E[name=value]
    2. E[name]
    
    3. E[name~=value]  只要包含value的元素就选中
    4. E[name*=value]  只要包含a字母就可以
    5. E[name^=value]  只要value第一个class的首字母是a就可以
    6. E[name$=value]  只要value最后一个class的尾字母是a就可以
    7. E[name|=value] 只要一value为首（value-abc）
    8. E[name][name2] 俩个都得满足

结构性伪类选择器:

li:nth-child(1){ css里面从1开始
    background:red;
}   
li:nth-child(n){ 全选中
    background:red;
}   
li:nth-child(2n){ 偶数
    background:red;
}   
li:nth-child(2n-1){ 奇数
    background:red;
}   


li:nth-last-child(1){---倒数第一个
    background:red;
}

其他的伪类选择器：

li:empty{-----选择空元素的
        background:red;
}

#box>p{ border:2px solid red;}---选中的是离#box最近的p标签

#box~p{ border:2px solid red;}--选中的是离#box下面的兄弟元素

h1:not(.blue){ background:red;}---除了blue以外，其他的都选中！

文本伪类选择器：

---

js新的选择器：

document.querySelector('#box');获取一组

document.querySelectorAll('#box li');获取一组