css3基础介绍

一、css3选择器
    1，css2.1选择器
        标签 div
        类  .class
        id  #id
        通配符 *
        交集 div.d#id
        并集  div,p,span,#id{}
        后代  div p span
    2，关系选择器
        儿子  > ie7开始兼容
        下一个兄弟 + ie7开始兼容
        后边所有兄弟  ~
        jquery都可以使用，ie6也能使用jquery
    3，属性选择器
        在css3中，标签可以通过任何属性被选择
        1)E[attr='val']  css3
            选择属性attr的值位val的元素
        2)E[attr^='val']  css3
            选择具有attr属性且以val开头的元素
        3)E[attr$='val']  css3
            选择具有attr属性且以val结束的元素
        4)E[attr*='val']  css3
            选择具有attr属性且包含val的元素
        5)E[attr|='val']  css3
            选择具有attr属性,并且属性值使用—分割，并且—前边内容是val的元素
        6)E[attr~='val']  css3
            选择具有attr属性，并且属性值使用空格分割，并且空格后边是val的元素
    4，序选择器
            儿子序选择器  类似使用伪类实现
            1）p:first-child{}
                选择一个p标签，这个p标签是某一个元素的第一个儿子  ie7
            2）p:last-child{}
                选择一个p标签，这个p标签是某一个元素的最后一个儿子  ie9
            3）p:nth-child(n){}
                选择一个p标签，这个p标签是某个元素的第n个儿子  ie9
                n是从1开始的
                p:nth-child(2n)  2,4.....
                p:nth-child(3n+8)  8,11,14.....
                注意：2n时，n从0开始，但2n最小只能是1，所以0是取不到的；
                    3n+8时，n从0开始，最小是8
            4）p:nth-last-child(n){}
                选择一个p标签，这个p标签是某个元素的倒数第n个儿子  ie9
                p:nth-last-child(2n){}
                倒着数的所有偶数个p被选中
            5）p:nth-of-type(n){}
                选择一个p标签，这个p标签是某个元素中第n个p标签儿子  ie9
                只数p标签，其他标签不管
            jquery中这些选择器都是支持的
                $('p').eq(3)  和   $('p:nth-child(3)')
    5，伪类选择器
        a标签的伪类：
            :link  :visited  :hover  :active
        1):hover
            可以给任何元素使用  ie7
        2):focus
            获取焦点，当一个表单元素获取焦点时，能被选中
        3):not
            p:not(.lala)
            选择不带有类名为lala的p标签
        4):only-child
            唯一的儿子
            p:only-child{}
            如果一个p是某个元素的唯一的儿子，就会被选中
        5):empty
            空标签
            当一个标签首尾相连，没有任何内容，包括空格换行tab文本等，即为空标签
            <div></div>
        6):checked
            当单选按钮或复选框被选中时，执行伪类checked
        7):disabled and :enabled  ie9
            无效的和有效的表单元素
    6，伪元素
        :: 表示伪元素
        伪元素中必须写的属性是content
        1）::before   ::after
            这两个都是行内伪元素，需要转为块级元素或者脱标才能设置宽高
        2）::selection
            被选中的文本样式  ie9
        3）::first-letter   ::first-line
            第一个文字和第一行文字
    7，圆角
        border-radius  单位：px % em   ie9
        border-bottom-radius
        border-bottom-left-radius