kunkun

每个专业词语的背后是一种思想，理解并在实践中应用才是必要的。

优雅降级（graceful degradation）

一开始就构建站点的完整功能，然后针对浏览器测试和修复,使用优雅降级方案，Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，绝大多数Web设计师和开发者都通过专门的样式表或针对不同版本的IE的hack实践过优雅降级了；
使用优雅降级技术时，你必须首先完整的实现了网站，其中包括所有的功能和效果。然后再为那些无法支持所有功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强（progressive enhancement）

一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能。渐进增强是值得所有开发者采用的做法。渐进增强方案并不假定所有用户都支持javascript，而总是提供一种候补方法，确保用户可以访问（主要的）内容。

使用渐进增强时，无需为了一个已成型的网站在旧式浏览器下正常工作而做逆向工程。首先，只需要为所有的设备和浏览器准备好清晰且语义化的HTML以及完善的内容，然后再以无侵入（unobtrusive）的方式向页面增加无害于基础浏览器的额外样式和功能。当浏览器升级时，它们会自动地呈现出来并发挥作用。

想让网站在任何环境下看起来都保持一致是不可能的，不管为此付出多少努力，结局依旧会令你失望。与其试图让IE看起来堪比年轻它十岁的浏览器，不如努力改善网站的可访问性，或是进行更多的可用性测试，而不仅仅是让页面看起来更靓一点。

某些CSS3特性在不支持它的浏览器中简直是无法模拟实现的，但若使用渐进增强，就无需为了能让你的网站适合所有人而放弃这些技术。仅仅因为部分人不愿或不能升级浏览器，却让使用新型浏览器的用户无法享受CSS3所提供的伟大技术，这是毫无道理可言的。

我们应该先让网站能够正常工作于尽可能旧的浏览器上，然后不断为它在新型浏览器上实现更多的增强和改进。随着时间的推移，当越来越多的人开始升级浏览器而浏览器本身的支持度也不断提升时，就会有越来越多的人体验到这些增强和改进，它持续有效的使网站越来越好，却如需你刻意做什么。

思考

其实优雅降级和渐进增强都是页面的加分项，是针对技术的一种形而上的要求。保证尽可能多的用户都能正常使用网站是第一步，在此之上才需要考虑降级的极端情形和现代浏览器的体验增强。其实可以定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级。

在学习新技术的同时不要忘记复习一下那些最基础的东西

基本选择器

通配符选择器(*) 通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素
元素选择器根据tag名字来选择比如 p body div 等等
类选择器 .className
id选择器 #ID
后代选择器 A B (A、B分别为选择器中间) 有空格
子元素选择器(A>B)(IE6不支持子元素选择器)。
相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。
通用兄弟选择器（Ｅ >Ｆ）

通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。比如下面的代码：
群组选择器（selector1,selector2,…,selectorN）

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开，如上面所示selector1,selector2,…,selectorN。这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器，这一点大家在使用中千万要小心加小心。

属性选择器

E[attr]：只使用属性名，而不论这个属性值是什么，你就可以使用这个属性选择器
E[attr=”value”]：指定属性名，并指定了该属性的属性值为value；
E[attr~=”value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“~”不能不写;属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。
E[attr^=”value”]：属性值是以value开头的；
E[attr$=”value”]：而且属性值是以value结束的；
E[attr*=”value”]：而且属值中包含了value；
E[attr|=”value”]：属性值是value或者以“value-”开头的值

伪类选择器

动态伪类

:hover用于当用户把鼠标移动到元素上面时的效果；
:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
:focus用于元素成为焦点，这个经常用在表单元素上。
#####UI元素状态伪类
:enabled 表单元素可用（比如”type=”text”有enable和disabled两种状态，前者为可写状态后者为不可状态）
:disabled
:checked 表单元素选中适用于radio checked

CSS3的:nth选择器
:fist-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；

:nth-child(length);参数是具体数字

:nth-child(n);参数是n,n从0开始计算

:nth-child(n*length)n的倍数选择，n从0开始算

:nth-child(n+length);选择大于length后面的元素

:nth-child(-n+length)选择小于length前面的元素

:nth-child(n*length+1);表示隔n选一

:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格.

否定选择器（:not）selctorA:not(slectorB)

用来过滤元素，比如要选择除了type为button之外的任何input可以使用 input:not([type=”button”])
使用

伪元素

CSS 3之前使用:在CSS3中使用::

::first-line选择元素内容的第一行
::first-letter选择文本块的第一个字母，比如用来实现首字下沉。
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用，比如流行的清除浮动。
```
.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
```
-::selection用来改变浏览网页选中文的默认效果