前言

之前我們已經給大家介紹了關于html5的新特性，除了html5的新特性，CSS3的新特性也是面試中經常被問到的。下面話不多說了，需要的朋友們跟隨小編來一起看看詳細的介紹吧。

選擇器

CSS3中新添加了很多選擇器，解決了很多之前需要用javascript才能解決的布局問題。

element1~element2: 選擇前面有element1元素的每個element2元素。
[attribute^=value]: 選擇某元素attribute屬性是以value開頭的。
[attribute$=value]: 選擇某元素attribute屬性是以value結尾的。
[attribute*=value]: 選擇某元素attribute屬性包含value字符串的。
E:first-of-type: 選擇屬于其父元素的首個E元素的每個E元素。
E:last-of-type: 選擇屬于其父元素的最后E元素的每個E元素。
E:only-of-type: 選擇屬于其父元素唯一的E元素的每個E元素。
E:only-child: 選擇屬于其父元素的唯一子元素的每個E元素。
E:nth-child(n): 選擇屬于其父元素的第n個子元素的每個E元素。
E:nth-last-child(n): 選擇屬于其父元素的倒數第n個子元素的每個E元素。
E:nth-of-type(n): 選擇屬于其父元素第n個E元素的每個E元素。
E:nth-last-of-type(n): 選擇屬于其父元素倒數第n個E元素的每個E元素。
E:last-child: 選擇屬于其父元素最后一個子元素每個E元素。
:root: 選擇文檔的根元素。
E:empty: 選擇沒有子元素的每個E元素（包括文本節點)。
E:target: 選擇當前活動的E元素。
E:enabled: 選擇每個啟用的E元素。
E:disabled: 選擇每個禁用的E元素。
E:checked: 選擇每個被選中的E元素。
E:not(selector): 選擇非selector元素的每個元素。
E::selection: 選擇被用戶選取的元素部分。

Transition,Transform和Animation

這三個特性是CSS3新增的和動畫相關的特性。

Transition

Transition可以在當元素從一種樣式變換為另一種樣式時為元素添加效果，而不用使用Flash動畫或JavaScript。

Transition有如下屬性：

transition-property: 規定應用過渡的CSS屬性的名稱。
transition-duration: 規定完成過渡效果需要多長時間。
transition-delay: 規定過渡效果何時開始，默認是0。
transition-timing-function: 規定過渡效果的時間曲線，默認是”ease”，還有linear、ease-in、ease-out、ease-in-out和cubic-bezier等過渡類型。
transition: 簡寫屬性，用于在一個屬性中設置四個過渡屬性。

在一個例子中使用所有過渡屬性如下：

div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;