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（可以省略）
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/102384.html
標籤：Html/Css
下一篇：網站的favicon圖示