CSS3 的新特性-有解無憂

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 {
content: " ";偽元素必須寫的屬性
display: block;插入的元素必須是塊級
height: 0;不要看見這個元表
clear: both;核心代碼清除浮動
visibility: hidden;不要看見這個元素

}

.clearfix:before, .clearfix:after {
content: " ";
display: table;轉換為塊級元素并且一行顯示

}
.clearfix:after {
clear: both;

}

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（可以省略），

口訣：誰做過渡給誰加，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553339.html

標籤：其他

上一篇：【一步步開發AI運動小程式】六、人體骨骼圖繪制

下一篇：返回列表