css3知识点新增

一、新增选择器

        1、子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素

                ul > li {

                        background: green;color: yellow;

                }

        2、相邻兄弟元素选择器(E + F)

                EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻

                .active + li { }

        3、通用兄弟选择器（Ｅ 〜 Ｆ）

                E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择 所有Ｅ元素后面的Ｆ元素

                 .active ~ li { }

        4、E[attr]：只使用属性名，但没有确定任何属性值

                .demo a[id] { }

                也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中   .demo a[href][title] { }

        5、E[attr="value"]选择器是指定了属性值“value”

                .demo a[id="first"] { }

                也可以多个属性并写，进一步缩小选择范围

                .demo a[href="www.com"][title] { }

                对于E[attr="value"]这种属性值选择器有一点需要注意：属性和属性值必须完全匹配，特别是对于属性 值是词列表的形式时 

        6、E[attr^="value"]

                选择attr属性值以“value”开头的所有元素

                .demo a[href^="http://"]{ }

        7、E[attr*="value"]

                所选择的属性，其属性值中有这个"value"值都将被选中

                .demo a[title*="site"]{ }

        8、E[attr|="value"]

                选择器会选择attr属性值等于value或以value-开头的所有元素

                .demo a[lang^="z"]{ }

        9、伪类选择器

                :focus{ }元素获取焦点

                :checked{ }选择有选中状态的元素

                :disabled{ }选择不可用状态的元素

                :first-child{ }选择第一个子元素

                :last-child{ }选择最后一个子元素

                :nth-child(n){ }选择第n个子元素

                :first-of-type{ }选择同种类型的第一个元素

                :last-of-type{ }选择同种类型的最后一个元素

                :nth-of-type(n){ }选择同种类型的第n个元素

                n 是数字、even偶数、odd奇数