1. CSS3 新增選擇器
CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標(biāo)元素。
1.1 屬性選擇器
屬性選擇品可以根據(jù)元素特定屬性的來選擇元素。這樣就可以不用借助于類或者id選擇器。
|
選擇符 |
簡介 |
|
E[att] |
選擇具有 att 屬性的E 元素。 |
|
E[att="val"] |
選擇具有 att 屬性且厲性值等于 val 的E 元素。 |
|
E[att^="val"] |
匹配具有 att 屬性旦值以 val 開頭的E 元素。 |
|
E[att$="val"] |
匹配具有 att 屬性且位以 val 結(jié)尾的E 元素。 |
|
E[att*="val"] |
匹配具有 att 屬性且值中含有val 的E元素。 |
注意：類選擇器、厲性選擇器、偽類選擇器，權(quán)重為 10。
1.2 結(jié)構(gòu)偽類選擇器
結(jié)構(gòu)偽類選擇器主要根據(jù)文檔結(jié)構(gòu)來選擇器元素 ，常用于根據(jù)父級選擇器里面的子元素。
|
選擇符 |
簡介 |
|
E:first-child |
匹配父元素中的第一個(gè)子元素E。 |
|
E:last-child |
匹配父元素中最后一個(gè)E元素。 |
|
E:nth-child(n) |
匹配父元素中的第n個(gè)子元素E。 |
|
E:first-of-type |
指定類型E的第一個(gè)。 |
|
E:last-of-type |
指定類型E的最后一個(gè)。 |
|
E:nth-of-type(n) |
指定類型E的第n個(gè)? 。 |
nth-child （n）選擇某個(gè)父元素的一個(gè)或多個(gè)特定的子元素。
n可以是數(shù)字，關(guān)鍵字和公式。
n如果是數(shù)字 ，就是選擇第n 個(gè)子元素 ，里面數(shù)字從1開始…。
n可以是關(guān)鍵字：even偶數(shù)，odd 奇數(shù)。
n可以是公式：常見的公式如下（如果n是公式，則從0開始計(jì)算，但是第0個(gè)元素或者超出了元素的個(gè)數(shù)會被忽略）。
|
公式 |
取值 |
|
2n |
偶數(shù)。 |
|
2n+1 |
奇數(shù)。 |
|
5n |
5 10 15...。 |
|
n+5 |
從第5個(gè)開始（包含第五個(gè)）到最后。 |
|
-n+5 |
前5個(gè)（包含第5個(gè)）。 |
區(qū)別：
1. nth-child對父元素里面所有孩子排序選擇（序號是固定的） 先找到第n個(gè)孩子 ，然后看看是否和E匹配。
2. nth-of-type 對父元素里面指定子元素進(jìn)行排序選擇。先去匹配E，然后再根據(jù)E找第n個(gè)孩子。
1.3 偽元素選擇器
偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標(biāo)簽元素，而不需要HTML標(biāo)簽，從而簡化HTML結(jié)構(gòu)。
|
選擇符 |
簡介 |
|
::before |
在元素內(nèi)部的前面插入內(nèi)容。 |
|
::after |
在元素內(nèi)部的后面插入內(nèi)容。 |
注意：
（1） before 和after 創(chuàng)建一個(gè)元素，但是屬于行內(nèi)元素。
（2） 新創(chuàng)建的這個(gè)元素在文檔樹中是找不到的，所以我們稱為偽元素。
語法：
| element::before {} |
before 和after必須有 content 屬性。
before 在父元素內(nèi)容的前面創(chuàng)建元素，after 在父元素內(nèi)容的后面插入元素。
偽元泰選擇器和標(biāo)簽選擇器一樣，權(quán)重為 1。
偽元素選擇器使用場景：偽元素清除浮動
|
升級 |
優(yōu)化 |
|
.clearfix:after { } |
.clearfix:before, .clearfix:after { }? ? ? ? ? ? } |
2. CSS3盒子模型
CSS3 中可以通過 box-sizing 來指定盒模型，有2個(gè)值：即可指定為content-box border-box，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變。
可以分成兩種情況：
1. box-sizing: content-box 盒子大小為 width + padding + border （以前默認(rèn)的）。
2. box-sizing:border-box 盒子大小為 width。
如果盒子模型我們改為了box-sizing; border-box，那padding和border就不會撐大盒子了（前提padding和border不會超過width寬度）。
2.1 CSS3濾鏡filter
filter Css屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。
filter:函數(shù)(）例如：filter:blur(5px); blur模糊處理 數(shù)值越大越模糊。
2.2 CSS3calc 函數(shù)
calc（此CSS函數(shù)讓你在聲明CSS屬性值時(shí)執(zhí)行一些計(jì)算）。
width: calc(100% - 80px); （運(yùn)算符號前面必須有空格，并注意包含單位）。
括號里面可以使用 ＋-*/ 來進(jìn)行計(jì)算。
2.3 CSS3 過渡
過渡 (transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或javaScript 的情況下 ，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
過渡動畫：是從一個(gè)狀態(tài)漸漸的過渡到另外一個(gè)狀態(tài)。
transition:要過渡的屬性 花費(fèi)時(shí)間 運(yùn)動曲線 何時(shí)開始；
1.屬性：想要變化的 css 屬性，完度高度 背景顏色 內(nèi)外邊距都可以。如果想要所有的屬性都變化過渡，寫一個(gè)all 就可以。
2. 花費(fèi)時(shí)間 ：單位是 秒（必須寫單位）比如0.5s。
3.運(yùn)動曲線：默認(rèn)是ease（可以省路）。
4.何時(shí)開始：單位是秒（必須寫單位）可以設(shè)置延遲觸發(fā)時(shí)間 默認(rèn)是0s（可以省略）。文章來源：http://www.zghlxwxcb.cn/news/detail-457320.html
口訣：誰做過渡給誰加。文章來源地址http://www.zghlxwxcb.cn/news/detail-457320.html
到了這里，關(guān)于CSS3 的新特性的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
