CSS3的新特性 1. 新增CSS3特性有相容性問題,ie9+才支持 2. 移動端支持優於PC端 3. 新增選擇器和盒子模型以及其他特性 4. CSS新增選擇器 屬性選擇器 屬性選擇器可以根據元素特定屬性來選擇元素,這樣就可以不用藉助於類或者id選擇器 | 選擇符 | 簡介 | | | | | E[ ...
CSS3的新特性
新增CSS3特性有相容性問題,ie9+才支持
移動端支持優於PC端
新增選擇器和盒子模型以及其他特性
CSS新增選擇器
屬性選擇器
屬性選擇器可以根據元素特定屬性來選擇元素,這樣就可以不用藉助於類或者id選擇器
選擇符 簡介 E[att] 選擇具有att屬性的E元素 E[att="val"] 選擇具有att屬性切屬性值等於val的E元素 E[att^="val"] 匹配具有att屬性且值以val開頭的E元素 E[att$="val"] 匹配具有att屬性且值以val結尾的E元素 E[att*="val"] 匹配具有att屬性且值中含有val的E元素 【註意】類選擇器、屬性選擇器、偽類選擇器,權重為10
結構偽類選擇器
選擇符 簡介 E:first-child 匹配父元素中元素的第一個子元素E E:last-child 匹配父元素中最後一個E元素 E:nth-child(n) 匹配父元素中的第n個子元素E E:first-of-type 指定類型E的第一個 E:last-of-type 指定類型E的最後一個 E:nth-of-type(n) 指定類型E的第n個 nth-child(n)選擇某個父元素的一個或多個特定的子元素
n可以是數字,關鍵字和公式
n如果是數字,就是選擇第n個子元素,裡面數字從1開始
n可以是關鍵字:even偶數,odd奇數
n可以是公式:常見的公式如下(如果n是公式,則從0開始計算,但是第0個元素或者超出元素的個數會被忽略)
公式 取值 2n 偶數 2n+1 奇數 5n 5 10 15 . n+5 從第5個開始(包含第五個)到最後 -n+5 前5個(包含第5ge) 選擇符 簡介 E:first-child 匹配父元素中的第一個子元素E E:last-child 匹配父元素中最後一個E元素 E:nth-child(n) 匹配父元素中的第N個子元素 E:first-of-type 指定類型E的第一個 E:last-of-type 指定類型E的最後一個 E:nth-of-type(n) 指定類型E的第n個 【區別】nth-child對父元素裡面所有孩子排序選擇(序號是固定的)先找第n個孩子,然後看看是否和E匹配;nth-of-type:對父元素裡面指定子元素進行排序選擇。先去匹配E,然後再根據E找第n個孩子
偽元素選擇器
偽元素選擇器可以幫我們利用CSS創建新標簽元素,而不需要HTML標簽,從而簡化HTML結構
選擇符 簡介 ::before 在元素內部插入內容 ::after 在元素內部的後面插入內容 【註意】
- befor和after創建一個元素,但是屬於行內元素
- 新創建的這個元素在文檔樹中是找不到的,所以我們成為偽元素
- 語法:element::befor{}
- before和after必須有content屬性
- before在父元素內容的前面創建元素,after在父元素內容的後面插入元素
- 偽元素選擇器和標簽選擇器一樣,權重為1
CSS3盒子模型
- CSS3中可以通過box-sizing來制定盒模型,有2個值;即可指定為content-box、border-box,這樣我們計算盒子大小的方式就發生了改變
css3圖片變模糊
CSS3濾鏡filter:
filter CSS屬性將模糊或顏色偏移等圖片效果應用於元素
filter:函數(); 例如:filter:blur(5px); blur模糊處理 數值越大越模糊
計算盒子寬度width:calc函數
width:calc(100%-80px);
- 括弧裡面可以使用+ - * /來進行計算
CSS3過渡
過渡transition是CSS3中具有顛覆性的特征之一,我們可以在不使用Flash動畫或者JS的情況下,當元素從一種樣式變換為〇一種樣式時為元素添加效果
過渡動畫:是從一個狀態漸漸的過渡到另一種狀態
經常和:hover一起搭配使用
transition:要過渡的屬性 花費的時間 運動曲線 何時開始;
值 說明 屬性 想要變化的CSS屬性,寬度 高度 背景顏色 內外邊距都可以。如果想要所有的屬性都有變化過渡,寫一個all就可以了 花費的時間 單位是 秒(必須寫單位)比如0.5s 運動曲線 預設時ease(可以省略) 何時開始 單位時 秒 (必須寫單位)可以設置延遲出發時間 預設時0s(可以省略)