一熙揍、屬性選擇器
屬性選擇器可以根據(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瑞侮。
二、結(jié)構(gòu)偽類選擇器
結(jié)構(gòu)偽類選擇器主要根據(jù)文檔結(jié)構(gòu)來選擇器元素鼓拧， 常用于根據(jù)父級(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è) |
區(qū)別：
- nth-child 對(duì)父元素里面所有孩子排序選擇（序號(hào)是固定的） 先找到第n個(gè)孩子，然后看看是否和E匹配
- nth-of-type 對(duì)父元素里面指定子元素進(jìn)行排序選擇季俩。 先去匹配E 钮糖，然后再根據(jù)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ù)會(huì)被忽略 )
| 公式 | 取值 |
|---|---|
| 2n | 偶數(shù) |
| 2n+1 | 奇數(shù) |
| 5n | 5 10 15··· |
| n+5 | 從第5個(gè)開始（包含第5個(gè)）到最后 |
| -n+5 | 前5個(gè)（包含第5個(gè)）··· |
如果是無序列表，我們肯定用 nth-child 更多
:nth-of-type(an+b)
這個(gè)選擇器匹配那些在相同兄弟節(jié)點(diǎn)中的位置與模式 an+b 匹配的相同元素都哭，
模式不匹配的首先就不會(huì)參與計(jì)數(shù)秩伞。
:nth-child(an+b)
這個(gè)選擇器首先就會(huì)找到所有當(dāng)前元素的兄弟元素參與計(jì)數(shù)，
模式不匹配的就不會(huì)被選擇欺矫。
按照位置先后順序從1開始排序稠歉，即元素的第一個(gè)子元素的下標(biāo)為 1。
n=0汇陆，1怒炸，2，3...
a 和 b 都必須為整數(shù)毡代，an 必須寫在 b 的前面阅羹，不能寫成 b+an 的形式。
三教寂、偽元素選擇器
偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標(biāo)簽元素捏鱼，而不需要HTML標(biāo)簽，從而簡(jiǎn)化HTML結(jié)構(gòu)酪耕。
| 選擇符 | 描述 |
|---|---|
| ::before | 在元素內(nèi)部的前面插入內(nèi)容 |
| ::after | 在元素內(nèi)部的后面插入內(nèi)容 |
注意：
? before 和 after 創(chuàng)建一個(gè)元素导梆，但是屬于行內(nèi)元素
? 新創(chuàng)建的這個(gè)元素在文檔樹中是找不到的，所以我們稱為偽元素
? 語法： element::before {}
? before 和 after 必須有 content 屬性
? before 在父元素內(nèi)容的前面創(chuàng)建元素，after 在父元素內(nèi)容的后面插入元素
? 偽元素選擇器和標(biāo)簽選擇器一樣看尼，權(quán)重為 1
p::before {
content: '\e91e';
color: #069328;
}
#father:hover::before {
display: block;
}
四递鹉、CSS3 盒子模型
CSS3 中可以通過 box-sizing 來指定盒模型，有2個(gè)值：即可指定為 content-box藏斩、border-box躏结，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變。
可以分成兩種情況：
- box-sizing: content-box 盒子大小為 width + padding + border （以前默認(rèn)的）
- box-sizing: border-box 盒子大小為 width
如果盒子模型我們改為了box-sizing: border-box 狰域， 那padding和border就不會(huì)撐大盒子了（前提padding和border不會(huì)超過width寬度）
五媳拴、CSS3 濾鏡filter
filter CSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。
filter: 函數(shù)(); 例如： filter: blur(5px); blur模糊處理 數(shù)值越大越模糊
六兆览、CSS3 calc函數(shù)
calc() 此CSS函數(shù)讓你在聲明CSS屬性值時(shí)執(zhí)行一些計(jì)算屈溉。
width: calc(100% - 80px);
括號(hào)里面可以使用 + - * / 來進(jìn)行計(jì)算。
七抬探、CSS3 過渡
過渡（transition)是CSS3中具有顛覆性的特征之一子巾，我們可以在不使用 Flash 動(dòng)畫或
JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果驶睦。
過渡動(dòng)畫： 是從一個(gè)狀態(tài) 漸漸的過渡到另外一個(gè)狀態(tài)
可以讓我們頁面更好看砰左，更動(dòng)感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會(huì)影響頁面布局场航。
我們現(xiàn)在經(jīng)常和 :hover 一起 搭配使用缠导。
transition: 要過渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始;
1.屬性： 想要變化的 css 屬性， 寬度高度 背景顏色 內(nèi)外邊距都可以 溉痢。如果想要所有的屬性都變化過渡僻造， 寫一個(gè)all 就可以。
2.花費(fèi)時(shí)間： 單位是 秒（必須寫單位） 比如 0.5s
3.運(yùn)動(dòng)曲線： 默認(rèn)是 ease （可以省略）
4.何時(shí)開始 ：?jiǎn)挝皇?秒（必須寫單位）可以設(shè)置延遲觸發(fā)時(shí)間 默認(rèn)是 0s （可以省略）
| 屬性值 | 描述 | 圖像 |
|---|---|---|
| linear | 勻速 |  |
| ease | 逐漸慢下來 |  |
| ease-in | 加速 |  |
| ease-out | 減速 |  |
| ease-in-out | 先加速后減速 |  |
