前言

之前我們已經給大家介紹了關于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: 簡寫屬性，用于在一個屬性中設置四個過渡屬性。

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

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表