1. CSS3 新增選擇器 CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標元素。 1.1 屬性選擇器 屬性選擇品可以根據元素特定屬性的來選擇元素。這樣就可以不用藉助於類或者id選擇器。 選擇符 簡介 E[att] 選擇具有 att 屬性的E 元素。 E[att="val"] 選擇具有 ...
1. CSS3 新增選擇器
CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標元素。
1.1 屬性選擇器
屬性選擇品可以根據元素特定屬性的來選擇元素。這樣就可以不用藉助於類或者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。
1.2 結構偽類選擇器
結構偽類選擇器主要根據文檔結構來選擇器元素 ，常用於根據父級選擇器裡面的子元素。
|
選擇符 |
簡介 |
|
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個（包含第5個）。 |
區別：
1. nth-child對父元素裡面所有孩子排序選擇（序號是固定的） 先找到第n個孩子 ，然後看看是否和E匹配。
2. nth-of-type 對父元素裡面指定子元素進行排序選擇。先去匹配E，然後再根據E找第n個孩子。
1.3 偽元素選擇器
偽元素選擇器可以幫助我們利用CSS創建新標簽元素，而不需要HTML標簽，從而簡化HTML結構。
|
選擇符 |
簡介 |
|
::before |
在元素內部的前面插入內容。 |
|
::after |
在元素內部的後面插入內容。 |
註意：
（1） before 和after 創建一個元素，但是屬於行內元素。
（2） 新創建的這個元素在文檔樹中是找不到的，所以我們稱為偽元素。
語法：
| element::before {} |
before 和after必須有 content 屬性。
before 在父元素內容的前面創建元素，after 在父元素內容的後面插入元素。
偽元泰選擇器和標簽選擇器一樣，權重為 1。
偽元素選擇器使用場景：偽元素清除浮動
|
升級 |
優化 |
|
.clearfix:after { } |
.clearfix:before, .clearfix:after { } } |
2. CSS3盒子模型
CSS3 中可以通過 box-sizing 來指定盒模型，有2個值：即可指定為content-box border-box，這樣我們計算盒子大小的方式就發生了改變。
可以分成兩種情況：
1. box-sizing: content-box 盒子大小為 width + padding + border （以前預設的）。
2. box-sizing:border-box 盒子大小為 width。
如果盒子模型我們改為了box-sizing; border-box，那padding和border就不會撐大盒子了（前提padding和border不會超過width寬度）。
2.1 CSS3濾鏡filter
filter Css屬性將模糊或顏色偏移等圖形效果應用於元素。
filter:函數(）例如：filter:blur(5px); blur模糊處理 數值越大越模糊。
2.2 CSS3calc 函數
calc（此CSS函數讓你在聲明CSS屬性值時執行一些計算）。
width: calc(100% - 80px); （運算符號前面必須有空格，並註意包含單位）。
括弧裡面可以使用 ＋-*/ 來進行計算。
2.3 CSS3 過渡
過渡 (transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或javaScript 的情況下 ，當元素從一種樣式變換為另一種樣式時為元素添加效果。
過渡動畫：是從一個狀態漸漸的過渡到另外一個狀態。
transition:要過渡的屬性 花費時間 運動曲線 何時開始；
1.屬性：想要變化的 css 屬性，完度高度 背景顏色 內外邊距都可以。如果想要所有的屬性都變化過渡，寫一個all 就可以。
2. 花費時間 ：單位是 秒（必須寫單位）比如0.5s。
3.運動曲線：預設是ease（可以省路）。
4.何時開始：單位是秒（必須寫單位）可以設置延遲觸發時間 預設是0s（可以省略）。
口訣：誰做過渡給誰加。
