css3选择器

一.css3概念

CSS3是CSS（层叠样式表）技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂 。

二.渐进增强和优雅降级

1.渐进增强

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。

2.优雅降级

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能就好，可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。

区别：1.）如果你采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大。好处就是提供了较好的平台稳定性，维护起来资金小， 长期来说降低开发成本。

2.）采用优雅降级，这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版，而对于功能尚未确定的 产品，优雅降级不失为一种节约成本的方法。

三.选择器

1.层级选择器

        1）子代选择器

                E>F：所有的F被设置，且F为E的子孩子

         2）后代选择器

                E F：E中的所有F被设置

         3）相邻兄弟选择器

                E+F：此F元素的相邻的下一个兄弟被设置

          4）通用选择器

                E~F：此F元素后的所有亲兄弟被设置

2.属性选择器

                [属性，属性，...]        有此属性的全被设置

                E[属性]        E中含此属性的设置

       1）完全匹配：

                               E[属性=a]        E中此属性=a的被设置

       2）包含匹配：

                               E[属性~=a]        E中此属性含a的被设置

       3）模糊匹配：

                                  [属性^a]        以a开头的被设置

                                  [属性$a]        以a结尾的被设置

                                  [属性*a]        含有a的被设置

3.伪类选择器

        1）结构伪类选择器

                X:first-child        第一个子元素

                X:last-child        最后一个子元素

                X:nth-child        n是几，就是第几个元素

                                        偶数：2n/even

                                        基数：2n+1/2n-1/odd

                X:only-child         仅有一个子元素

                X:root        根元素，HTML就是根元素

                X:empty        无任何子元素（包含文本）

         2)目标伪类选择器

                E:target        选择匹配E的所有元素，且匹配元素被相关URL指向

         3）UI元素状态伪类选择器

                E:enable        form表单中可用状态下匹配

                E:disabled        form表单中不可用状态下匹配

                E:focus        聚焦 会匹配E

                E:checked        处于选中状态的元素

                E:selection        被选中后的状态

          4）否定伪类选择器

                E:not(s)        s以外的E匹配

          5）动态伪类选择器

                E:link        未被访问状态

                E:visited        已被访问状态

                E:active        被激活的状态

                E:hover        鼠标悬停状态（IE6以下浏览器仅支持a:hover）