CSS中的优雅降级和渐进增强和属性选择器

适配各浏览器

-webkit-border-radius-:;  //谷歌浏览器、360浏览器（具有相同内核）
-ms-border-radius-:;    //ie浏览器
-moz-border-radius-:；   //火狐浏览器
-o-border-radius-:;    //Opera（欧朋）浏览器

css3优雅降级:

优先考虑高版本浏览器的兼容，再考虑低版本浏览器的兼容

  border-radius:;
 -webkit-border-radius-:;  //谷歌浏览器、360浏览器（具有相同内核）
 -ms-border-radius-:;    //ie浏览器
 -moz-border-radius-:；   //火狐浏览器
 -o-border-radius-:;    //Opera（欧朋）浏览器

渐进增强:

优先考虑低版本浏览器的兼容，再考虑高版本浏览器的兼容

-webkit-border-radius-:;  //谷歌浏览器、360浏览器（具有相同内核）
-ms-border-radius-:;    //ie浏览器
-moz-border-radius-:；   //火狐浏览器
-o-border-radius-:;    //Opera（欧朋）浏览器
 border-radius:; 

属性选择器:

    e[attr]{}选中e元素,且有attr属性
    e[attr= "value"]{}选中e元素，且有attr属性，值为value
    e[attr~="value"]{}选中e元素，且有attr属性，值包含value

    [拓展]

    e[attr^="value"]{}选中e元素,且有attr属性，值以value开头
    e[attr$="value"]{}选中e元素,且有attr属性,值以value结尾
    e[attr*= "value"]{}选中e元素，且有attr属性，值包含value 
    e[attr|="value"]{}选中e元素,且有attr属性，值只有value或者以value-开头

结构伪类选择器:

    box:first-child{} 选中box本身 ，且box是第一个子元素
    box:last-child{} 选中box本身 ，且box是最后一个子元素
    div:nth-child(n){}选中div本身，是指定位置的子元素
        n是从0开始的自然数
        2n = even  偶数序列
        2n-1 = odd  奇数序列


    div:only-child{}选中div本身,div是唯一的子元素
    html :root{}选中根元素html
    .box:empty{} 选中box,且box内容为空，有空格也不行
    li:not(.list){}否定选择器，选中1i,但是排除li中有class="list"的这个元素
    .box:target p{} 目标伪类选择器，当box被关联后，在选中box的子元素p

层级选择器:

    e > f{}子元素选择器选中e中的子元素f
    e + f{}相邻兄弟选择器选中e后面紧挨着的兄弟元素f
    e ~ f{}通用兄弟选择器选中e后面的所有兄弟元素f