优雅降级+渐进增强

浏览器兼容前缀:

-webkit-  webkit内核浏览器 (谷歌)
    -moz- 火狐浏览器
    -ms-  ie浏览器
    -o-   欧朋浏览器

优雅降级:

优先考虑高本本浏览器,再考虑低版本浏览器的兼容问题,从大到小

渐进增强:

优先考虑低版本浏览器,再考虑高版本浏览器的兼容问题,从小到大

css3选择器:

层级选择器:
    E > F{} 子元素选择器,选中e元素中的子元素f
    E + F{} 相邻兄弟选择器,选中紧挨着e的那一个f兄弟元素
    E ~ F{} 通用兄弟选择器,选中e后所有的f兄弟元素
		
属性选择器:
    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-开头

结构伪类选择器:

X:first-child{} 选中x元素,且x元素是第一个子元素
    X:last-child{} 选中x元素,且x元素是最后一个子元素
    X:nth-child(n){} 选中指定位置的x元素
        n是从0开始的自然数
        2n = even 偶数序列

2n-1 = odd奇数序列

    X:only-child{} 选中X元素,且只有X一个元素
    html:root{} 选中根元素
    :empty{} 选中空元素

目标伪类选择器

.box:target{} 当box被关联的时候选中
   【注】需要结合锚点链接一块使用

UI元素状态伪类选择器:

:enabled{} 可用状态
    :disabled{} 禁用状态
    :checked{} 选中状态
    ::selection{} 选中文本状态,主要针对背景颜色 文本颜色

否定选择器:

.box:not(p){} 选中.box元素,但是排除.box元素中标签为p的元素
		

动态伪类选择器:

动态伪类选择器：
    :link{} 未点击状态
    :visited{} 访问过后状态
    :hover{} 鼠标悬停状态
    :active{} 鼠标按下状态
css3相关属性:
    text-shadow:水平阴影  垂直阴影 模糊度  阴影颜色;
    background-size:;
        px
        %
        cover
        contain
        【拓展】多背景设置： background:url(),url();

圆角:

border-radius:10px;
border-radius:10px/40px; 先水平圆角/垂直圆角

盒子阴影:

box-shadow:水平阴影 垂直阴影 模糊度 阴影大小 阴影颜色 内部阴影;