CSS3的新特性
屬性選擇器
屬性選擇器可以根據元素特定屬性來選擇元素，這樣就可以不用借助于類或者id選擇器了
| 選擇符 | 簡介 |
|---|---|
| E[attr] | 選擇具有attr屬性的E元素 |
| E[attr=‘val’] | 選擇具有attr屬性且屬性值等于val的E元素 |
| E[attr^=‘val’] | 比對具有attr屬性且屬性值以val開頭的E元素 |
| E[attr$=‘val’] | 比對具有attr的屬性且屬性值以val結尾的E元素 |
| E[attr*=‘val’] | 比對具有attr屬性且屬性值中包含val的E元素 |
注意：類選擇器、屬性選擇器、僞類選擇器的權重都是10
結構僞類選擇器
結構僞類選擇器主要是根據文檔結構來選擇元素，常用于根據父級選擇器裡面的子元素
| 選擇符 | 簡介 |
|---|---|
| E:first-child | 比對父元素中第一個子元素E |
| E:las-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可以是關鍵字，如nth-child(even)/nth-child(odd)則是擷取偶數行或奇數行
- n可以是公式， 如nth-child(n):注意這裡的字母必須用n不能用其它字母，n從0開始每次加1，往後面計算（第0個元素或超出了元素的個數會被忽略），相當于選擇了所有子元素
- 常用的公式如下：
取值 偶數 + 1 5 10 15 …5的倍數 5 +5
nth-child 與nth-of-type去别
- nth-child：會把所有的盒子都排列序号（不管是不是同一類元素），在執行的時候先看nth-child(n)，然後再去看前面的标簽名稱
- nth-of-type：會把指定的元素排列序号，在執行的時候首先看指定的元素，然後再去看nth-of-type(n)第幾個孩子。
<style>
/*選不到元素，因為第一個孩子是p而div是2*/
section div:nth-child(1){}
/*可以選出第一個div*/
section div:nth-of-type(1){}
</style>
<section>
<p></p>
<div></div>
<div></div>
</section>
僞元素選擇器
僞元素選擇器可以幫助我們利用CSS建立新标簽元素，而不需要HTML标簽，進而簡化HTML結構
|選擇符|簡介 |
|–|--|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的後面插入内容 |
- before和after建立一個元素，但是屬于行内元素
- 新建立的這個元素在文檔樹中是找不到的，是以稱為僞元素
- 文法： element::before{}
- before 和after必須有content屬性
- before在父元素内容的前面建立元素，after在父元素内容的後面插入元素
- 僞元素選擇器和标簽 選擇器一樣權重為1
僞元素使用場景：
- 配合字型圖示，例如在文本框後面增加一個下拉小三角
- 滑鼠懸浮盒子上出現遮蓋層
- 利用僞元素清除浮動
盒子模型
CSS3中可以通過box-sizing來指定盒子模型，有2個值：content-box、border-box，這樣計算盒子大小的方式就發生了改變
可以分為以下兩種情況
- box-sizing: content-box盒子大小為：width + padding + border(以前預設的)
box-sizing: border-box 盒子大小為width
如果盒子模型改為了box-sizing:border-box 那麼padding和border就不會撐大盒子了，前提是padding和border不能超過width
CSS3 濾鏡filter
filter css屬性将模糊或顔色便宜等圖形效果應用于元素
用法：filter:函數(); 例如：filter:blur(5px); blur模糊處理，數值越大越模糊
CSS3過渡（重點）
過渡（transition）是css3中具有颠覆性的特征之一，我們可以在不使用flash動畫或JavaScript的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。過渡動畫：是從一個狀态漸漸的過渡到另外一個狀态
可以讓我們的頁面更好看，更動感十足，雖然低版本浏覽器不支援，但不會影響頁面布局
transition：要過渡的屬性 花費時間 運動曲線 何時開始
- 屬性：想要變換的css屬性，寬度高度 背景顔色 内外邊距都可以，如果想要所有的屬性都變化過渡，寫一個all就可以
- 花費時間：機關是秒（必須寫機關） 如0.5s
- 運動曲線：預設是ease（可以省略）
何時開始：機關是秒（必須寫機關）可以設定延遲觸發時間 預設是0s（可以省略）
過渡口訣：誰過渡給誰加，如果要寫多個屬性用逗号分隔或用all也可以
過渡案例：實作進度條效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
border-radius: 7px;
transition: all .7s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
![（Nginx）02_Nginx配置執行個體一、Nginx的應用：反向代理實作一：二、反向代理執行個體二：三、Nginx的配置執行個體三–負載均衡：四、Nginx的配置執行個體四–動靜分離：Nginx在實際開發中的應用：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)