Css3简介及选择器

2015-04-04

css3的现状

1 浏览器支持程度擦，需要添加私有前缀。
私有前缀：各个浏览器根据内核的不同添加的一些本类型的浏览器认识的一些标记。
作用：伪类兼容本类低版本的浏览器写的一些特殊的字符
常见的浏览器内核：webkit(chrome opera safari) moz(firefox) IE,edge(ms) opera(o)
常用私有前缀：
-webkit- chrome opera safari
-moz-  firefox
-ms- IE
-o- opera
私有前缀的由来
-webkit-border-radius
-moz-border-radius
-ms-border-radius
-o-border-radius
产看某个属性是否添加私有前缀：www.caniuse.com
自动的工具：1 autoprefixer 2 gulp 考拉软件
2 移动短支持优于pc端
3 不断改进中

什么式渐进增强和优雅降级？

1 坚持渐进增强原则:针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2 优雅降级:最完美的效果和体验开始，往低版本浏览器进行降级，只留下最核心的内容和信息,如果出现一些小的无关紧要的bug，忽略不计

css3选择器

属性选择器设置样式

1 E[attr] 表示存在attr属性即可
例：a[href]{
    color:red;
}//表示所有attr都变色
2 E[attr=value] 表示属性值完全等于value
例： a[href='a.mp4']{
    color:red;
}
3 E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置
例： a[href^='b']{
    color:red;
}
4 E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置
例： a[href$='b']{
    color:red;
}
5 E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置
例：a[href*='b']{
    color:red;
}

伪类选择器设置样式 :

1 E:first-child 第一个子元素
例： li:first-child{
    background-color:red;
}
2 E:last-child 最后一个子元素
例：li:last-child{
    background-color:red;
}
3 E:nth-child(n) 第n个子元素，计算方法式E元素的全部兄弟元素
例： li:nth-child(4)  li元素的第四个元素
      li:nth-child(2n)  li元素的偶数元素
      li:nth-child(odd) li的奇数元素
      li:nth-child(-n+5) 选择到E元素的父元素的前5个子元素
    E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算

伪元素选择器设置样式

    E::after&&E::before
    例：在div前面添加一个::before伪元素
    div::before{
        content:""; 必须写content属性，否则无法添加伪元素
        display:block; 伪元素都是行内元素
        width:200px;
        height:200px;
        background-color:red;
    }
在元素上添加before和after,只能同时各添加一个before和after，不能在同一个元素上出现多个。