一、新增的选择器

CSS3新增的属性选择器 {除ie6外的大部分浏览器支持）

1    E[att^="val"]    属性att的值以"val"开头的元素    div[id^="nav"] { background:#ff0} 

2    E[att$="val"]    属性att的值以"val"结尾的元素       

3    E[att*="val"]    属性att的值包含"val"字符串的元素       

结构伪类选择器（过滤选择器）

(注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。

由于IE6/7/8不支持，没办法，选择合适的场合用吧。)

4    E:root    匹配文档的根元素，对于HTML文档，就是HTML元素       

5    E:nth-child(n)    匹配其父元素的第n个子元素，第一个编号为1    p:nth-child(3) { color:#f00}  

6    E:nth-last-child(n)    匹配其父元素的倒数第n个子元素，第一个编号为1    p:last-child { background:#ff0}  

7    E:nth-of-type(n)    与:nth-child()作用类似，但是仅匹配使用同种标签的元素    p:nth-of-type(2){color:red}选择父元素的第n个子元素p  

8    E:nth-last-of-type(n)    与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素       

9    E:last-child    匹配父元素的最后一个子元素，等同于:nth-last-child(1)       

10    E:first-of-type    匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)       

11    E:last-of-type    匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)       

12    E:only-child    匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)    p:only-child { background:#ff0}  

13    E:only-of-type    匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)       

14    E:empty    匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素    p:empty { background:#ff0}  

与用户界面(UI)有关的伪类(ie6 7 8不支持)    

15    E:enabled    匹配表单中激活的元素       

16    E:disabled    匹配表单中禁用的元素    input[type="text"]:disabled { background:#ddd}  

17    E:checked    匹配表单中被选中的radio（单选框）或checkbox（复选框）元素       

18    E::selection    匹配用户当前选中的元素       

级元素通用选择器

ie6不支持 

19    E ~ F    匹配任何在E元素之后的同级F元素    p ~ ul { background:#ff0}  

反选伪类

(ie6 7 8 firefox3.0以下 Opera9.0不支持)  

20    E:not(s)    匹配不符合当前选择器的任何元素    :not(p) { border:1px solid #ccc}  

:target 伪类

(ie6 7 8不支持)  

21    E:target    匹配文档中特定"id"点击后的效果       

 二、css3新增属性

一. box-shadow(阴影效果)

使用:

box-shadow: 20px 10px 0 #000

-moz-box-shadow: 20px 10px 0 #000

-webkit-box-shadow: 20px 10px 0 #000

支持:

    FF3.5, Safari 4, Chrome 3

二. border-colors(为边框设置多种颜色)

使用:

border: 10px solid #000

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

说明:

    颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555

支持:

   FF3+

三. boder-image(图片边框)

使用:

    -moz-border-image: url(exam.png) 20 20 20 20 repeat

    -webkit-border-image: url(exam.png) 20 20 20 20 repeat

说明:

(1). 20 20 20 20 --->边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果

(2). 边框图片效果(目前仅实现了两种):

   repeat --- 边框图片会平铺, 类似于背景重复

   stretch --- 边框图片会以拉伸的方式来铺满整个边框

(3). 必须将元素的边框厚度设置为非0非auto值.

支持:

    FF 3.5, Safari 4, Chrome 3

四. text-shadow(文本阴影)

使用:

    text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>]

说明:

(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色当<模糊半径>未指定时, 半径值为0

(2) shadow可以是逗号分隔的列表, 如:

  text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd

(3) 阴影效果会按照shadow list中指定的顺序应用到元素上

(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身

(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.

支持:

    FF 3.5, Opera 10, Safari 4, Chrome 3

五.  text-overflow(文本截断)

使用:

    text-overflow: inherit | ellipsis | clip

    -o-text-overflow: inherit | ellipsis | clip

说明:

(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.

支持:

    IE6+, Safari4, Chrome3, Opera10

六. word-wrap(自动换行)

使用:

    word-wrap: normal | break-word

支持:

    IE6+, FF 3.5, Safari 4, Chrome 3

七. border-radius(圆角边框)

使用:

     -moz-border-radius: 5px

-webkit-border-radius: 5px

支持:

FF 3+, Safari 4 , Chrome 3

八.   opacity(不透明度)

使用:

    opacity: 0.5

    filter: alpha(opacity=50)/* for IE6, 7 */

    -ms-filter(opacity=50)/* for IE8 */

支持:

    all

九. box-sizing(控制盒模型的组成模式)

使用:

    box-sizing: content-box | border-box// for opera

    -moz-box-sizing: content-box | border-box

    -webkit-box-sizing: content-box | border-box

说明:

   1. content-box:

   使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border

   2. border-box:

   使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度

   也不会变).

支持:

    FF3+, Opera 10, Safari 4, Chrome 3

十. resize(元素缩放)

使用:

    resize:  none | both | horizontal | vertical

说明:

    1. 必须将元素的overflow属性设置为auto或hidden, 该属性才能起作用(overflow设置为visible时, 无效)

    2. 属性值说明:

    (1). none -->禁用缩放

    (2). both -->可同时缩放宽度和高度

    (3). horizontal -->仅能缩放宽度

    (4). vertical -->仅能缩放高度

支持:

    safari 4, chrome 3

十一. outline(外边框)

使用:

    outline: 边框厚度 边框样式 边框颜色

    outline-offset: 偏移值

说明:

    outline-offset需要独立写, 简写是无效的.

支持:

    FF3+, safari 4, chrome 3, opera 10

十二. background-size(指定背景图片的尺寸)

使用:

    -o-background-size: [length | percentage] {1, 2}

    -webkit-background-size: [length | percentage] {1, 2}

例如:

   -o-background-size: 50px 60px

    -webkit-background-size: 50px 60px

    这会将背景图片的宽设置了50px, 高60px.

支持:

     safari 4, chrome 3, opera 10

十三. background-origin(指定背景图片从哪里开始显示)

使用:

    -webkit-background-origin: border | padding | content

    -moz-background-origin: border | padding | content

说明:

    (1) border --> 从border区域开始显示背景

    (2) padding --> 从padding区域开始显示背景

    (3) content --> 从content区域开始显示背景

注意:

    1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,

会无效.

支持:

     safari 4, chrome 3, FF 3+        

十四. background-clip(指定背景图片从什么位置开始裁切)

使用:

    -webkit-background-origin: border-box | padding-box | content-box | no-clip

说明:

    (1) border-box --> 从border区域向外裁剪背景

    (2) padding-box --> 从padding区域向外裁剪背景

    (3) content-box --> 从content区域向外裁剪背景

    (4) no-clip -->不裁切背景.

注意:

    1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,

会无效.

支持:

     safari 4, chrome 3

十五.  background(为一个元素指定多个背景)

使用:

    background:  [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

例子:

    background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom

支持:

     safari 4, chrome 3

十六. hsl(通过色调, 饱和度, 亮度来指定颜色值)

使用:

    hsl: ( <length> || <percentage> || <percentage>)

说明:

    (1) length: h(色调),  0(或360)表示红色, 120表示绿色, 240表示蓝色

    (2) percentage: s(饱和度),  取值为0%到100%之间的值

    (3) percentage: l(亮度),  取值为0%到100%之间的值

例子:

    background: hsl(240, 50%, 100%)

    color: hsl(100, 80, 100%)

支持:

     safari 4, chrome 3, FF3, opera 10

十七. hsla(在hsl的基础上上增加了一个透明度设置)

使用:

    hsla: ( <length>  ||  <percentage>  ||  <percentage>|| <opacity>)

说明:

    (1) opacity: a(透明度), 取值在0到1之间

例子:

    background: hsl(240, 50%, 100%, 0.5)

    color: hsl(240, 50%, 100%, 0.5)

支持:

     safari 4, chrome 3, FF3, opera 10

十八. rgba(基于r,g,b三个颜色通道来设置颜色值, 通过a来设置透明度)

使用:

    rgba: (r, g, b, opacity)

说明:

    (1) r: 红色, 正整数 | 百分数

    (2) g: 绿色, 正整数 | 百分数

    (3) b: 蓝色, 正整数 | 百分数

    (4) a: 透明度, 取值在0到1之间

    (5) 正整数在0到255之间, 百分数在0%到100%之间.

例子:

    rgba: (100%, 244, 0, 0.5)

支持:

     safari 4, chrome 3, FF3, opera 10

十九、 transition（a标签hover渐隐效果）

a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear 0s}

-webkit-transition:color 0.15s linear 0s, background-color 0.3s linear 0s

-moz-transition:color 0.15s linear 0s, background-color 0.3s linear 0s

-o-transition:color 0.15s linear 0s, background-color 0.3s linear 0s

-ms-transition:color 0.15s linear 0s, background-color 0.3s linear 0s

transition:color 0.15s linear 0s, background-color 0.3s linear 0s

h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。

- h5新增的标签

新增元素

说明

video    表示一段视频并提供播放的用户界面  

audio    表示音频  

canvas    表示位图区域  

source    为video和audio提供数据源  

track    为video和audio指定字母  

svg    定义矢量图  

code    代码段  

figure    和文档有关的图例  

figcaption    图例的说明  

main  

time    日期和时间值  

mark    高亮的引用文字  

datalist    提供给其他控件的预定义选项  

keygen    秘钥对生成器控件  

output    计算值  

progress    进度条  

menu    菜单  

embed    嵌入的外部资源  

menuitem    用户可点击的菜单项  

menu    菜单  

template  

section  

nav  

aside  

article  

footer  

header  

- css3

css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

选择器

框模型

背景和边框

border-radius、box-shadow、border-image、

background-size：规定背景图片的尺寸

background-origin：规定背景图片的定位区域

background-clip：规定背景的绘制区域

文本效果（常用）

text-shadow：设置文字阴影

word-wrap：强制换行

word-break

css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range

2/3D转换

transform：向元素应用2/3D转换

transition：过渡

动画

@keyframes规则：

animation、animation-name、animation-duration等

用户界面（常用）

box-sizing、resize

css3新增伪类

：nth-child()

：nth-last-child()

：only-child

：last-child

：nth-of-type()

：only-of-type()

：empty

：target  这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。

：enabled  

：disabled

：checked

：not

---