一. 複雜選擇器

1.兄弟選擇器

通過兄弟關係，匹配元素。
只能找弟弟，不能找哥哥
1.相鄰兄弟選擇器 選擇器1+選擇器2{}
匹配緊緊挨著選擇器1後面，並且符合選擇2的元素
2.通用兄弟選擇器 選擇器1~選擇器2{}
匹配選擇器1後面所有符合選擇器2的元素
專案中應用，實現一組元素，除去老大，都執行某個樣式

<style>
        li~li {
            background-color: firebrick;
        }
</style>

  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
   </ul>

專案中應用，實現一組元素，除去老大，都執行某個樣式

2. 屬性選擇器(不是為寫頁面設計的，為js的dom準備)

[attr]{樣式宣告}  匹配具有attr這個屬性的元素
[attr1][attr2]...{} 匹配同時定義這些屬性的元素
[attr=value]{} 匹配具有attr屬性並且值為value的元素
[attr1=value1][attr2=value2{}] 匹配這些屬性並且值為這些value的元素

elem[attr]{}  匹配具有attr屬性的elem元素
elem[attr=value]{}  匹配具有attr屬性並且值為value的elem元素
elem[attr1=value1][attr2=value2].....{}

後期dom操作，使用自定義屬性，查詢目標物件
模糊屬性值的匹配
[title^="gan"]{color:Red;}  匹配元素title屬性值以gan開頭
[title$="da"]{color:Red;}   匹配元素title屬性值以da結尾
[title*="meng"]{color:Red;} 匹配元素title屬性值含有meng
[title~="meng"]{color:Red;}  匹配元素title屬性值含有meng這個獨立單詞(meng前後有空格)

3. 偽類選擇器

已經學過的偽類 :link  :visited  :hover  :active  :focus
注意:在2012-2015重新定義了偽類的編寫規則
在這個時間點之前，發明的偽類選擇器使用單冒號宣告
在這個時間的過程中，發明的偽類選擇器使用單冒號/雙冒號宣告
在這個時間點之後，發明的偽類選擇器使用雙冒號宣告

①目標偽類（h5新出的）

匹配元素被錨點**的狀態
selector:target{}

②結構偽類

通過html結構來匹配元素
selector：first-child{}  匹配selector父元素的第一個兒子，同時這個大兒子還必須符合selector
selector：last-child{}  匹配selector父元素的最後一個兒子，同時這個小兒子還必須符合selector
select:nth-child(n){} 匹配selector父元素的第n個兒子，同時這個兒子還必須符合selector，n從1開始

③絕對丁克

:empty{}內部不能有其它元素，不能有文字，空格，回車

④獨生子女

:only-child{} 匹配是其父元素唯一的子元素
可以有兄弟空格，回車，文字，就是不能有兄弟元素

⑤否定偽類

:not(selector){}  所有符合selector的元素都不要

4. 偽元素選擇器

匹配某個元素的一部分
w3c最新的規定，推薦所有的偽類使用雙::編寫
但是之前已經出現的偽類，還使用單:

①匹配首字元

:first-letter 或者  ::first-letter

②匹配首行

:first-line  或者  ::first-line
注意，首字元和首行衝突，以首字元為準

③::selection

只能寫雙::，匹配使用者選中的文字
只能定義字型顏色和背景顏色
對首字元無效

5. 內容生成

使用css在元素的內容區域最前端或者最後端，新增一個假的元素
::before 或者 :before
在元素的內容區域最前端新增一個假的行內元素
::after 或者 :after
在元素的內容區域最後端新增一個假的行內元素
行內元素的內容使用content設定，但是隻能設定文字和url(img)
我們可以自由的對這個假元素設定各種樣式

內容生成可以解決的問題
(css有一些特殊情況，需要新增新的元素來解決，這個時候不用html新增新元素，要使用內容生成來新增新元素)
1.外邊距溢位，解決方案----在父級的內部新增一個空的table當做大兒子
#d2::before{
 content:"";
 display: table;
}
2.解決高度坍塌，解決方案----在父級的內部追加一個空的div當做小兒子，這個div設定clear:both
#parent::after{
  content:"";
  display: block;
  clear:both;
}

二. 彈性佈局

1. 什麼是彈性佈局

主要解決某個元素中內部子元素的佈局方式，為佈局提供的非常大的靈活性和操控性
設定了display：flex的元素本身不是彈性佈局
它的兒子們是彈性佈局

2. 彈性佈局的專業術語

1.彈性容器
當一個元素設定了display:flex
這個元素內部的子元素就按照彈性佈局方式排列
這個元素叫做彈性容器
2.彈性專案
當一個元素設定了display:flex
這個元素內部的子元素就按照彈性佈局方式排列
這些子元素，叫做彈性專案
3.主軸
專案的排列方向，稱為主軸
x軸，主軸起點在左側，主軸終點在右側
x軸，主軸起點在右側，主軸終點在左側
y軸，主軸起點在頂部，主軸終點在底部
y軸，主軸起點在底部，主軸終點在頂部
4.交叉軸
永遠與主軸垂直相交的一根軸
主軸可以設定，交叉軸不能設定，只會自動根據主軸方向改變

3. 語法

display:
 flex       經常用於讓塊級元素變為彈性容器
 inline-flex; 經常用於讓行內元素變為彈性容器
特點：
1.當元素變為彈性容器之後，這個容器的text-align失效，內部專案不會執行水平對齊
2.彈性專案，可以設定寬高
3.專案的浮動，clear：both都失效
總結：之前所有學習過的對齊方式，對於彈性專案都失效
      彈性專案的對齊，取決於主軸、交叉軸

4.樣式屬性

①容器的樣式

所有專案都要用
1.主軸方向（4根主軸）
flex-direction:row;           預設值，主軸為x軸，主軸起點在左側
             row-reverse    主軸為x，主軸起點在右側
             column        主軸為y軸，主軸起點在頂部
             column-reverse 主軸為y軸，主軸起點在底部
2.專案換行
flex-wrap:nowrap;預設值，主軸方向空間不夠也不換行，專案壓縮
          wrap 主軸方向空間不夠時，專案自動換行
          wrap-reverse; 交叉軸終點對齊，主軸方向空間不夠時，反方向換行
3.上面兩個屬性的縮寫方式
flex-flow:direction wrap;
4.定義專案在主軸上的對齊方式
justify-content: 
flex-start 預設值，主軸起點對齊
center;   主軸的中心對齊
flex-end  主軸的終點對齊
space-around 每個專案的間隙相同
space-between 兩端對齊
5.交叉軸上對齊方式 （2根）
align-items
flex-start 預設值。在交叉軸起點對齊
center    交叉軸中間對齊
flex-end  交叉軸終點對齊
baseline  每個專案中的文字，基線要對齊
stretch   專案在交叉軸方向上沒有定義尺寸，專案將充滿交叉軸
            

②專案的樣式

某一個專案使用
1.給某個專案單獨設定交叉軸上的對齊方式
align-self
flex-start 預設值。在交叉軸起點對齊
center    交叉軸中間對齊
flex-end  交叉軸終點對齊
baseline  每個專案中的文字，基線要對齊
stretch   專案在交叉軸方向上沒有定義尺寸，專案將充滿交叉軸
auto     使用容器定義的align-items的值
2.專案在主軸上的排列順序 order
取值為無單位整數
定義專案的排列順序，值越小，越靠近主軸起點，預設值為0
3.flex-grow
當主軸有多餘的區域，專案是否放大，放大比例是多少
預設值為0，不放大
把多餘的區域，按照比例分配，加上原始的尺寸，就是每個專案的實際尺寸
4.flex-shrink
當彈性佈局設定主軸不可換行，當主軸空間不夠，專案們會自動收縮主軸方向上的尺寸
flex-shrink用來設定專案收縮時的大小
把整個主軸方向壓縮的尺寸分為n份，設定每個專案具體被壓縮幾份
flex-shrink：取值為數字，預設值為1，取值為0是不許壓縮

5.flex-basis
設定某個專案在主軸上佔據的基本尺寸，通常取值為%
flex-basis優先順序大於專案自己定義的尺寸
一般不給圖片設定此尺寸
6.flex-grow  flex-shrink  flex-basis的縮寫
flex:0  0  20%;

三. CSS hack

由於不同瀏覽器對於css的解釋和認知不同，導致同一份css在不同瀏覽器會生成不一樣的效果
我們要做瀏覽器的相容，就叫做寫css hack
background:-webkit-linear-gradient();
-webkit-
-o-
-moz-
-ms-

四. 轉換

1.什麼是轉換

改變元素在頁面中的大小，位置，角度以及形狀
2D轉換，只發生在x軸和y軸上的轉換
3D轉換，添加了z軸上的轉換

2. 轉換屬性

transform:轉換函式1 轉換函式2 ......;

3. 2D的轉換函式

①位移

translate(x)和translatex(x)
在x軸位移
translatey(y)
在y軸的位移
translate(x,y)同時設定x軸和y軸的位移

②縮放

scale(n)
x軸和y軸同時縮放n倍
scale(x,y)
分別設定x軸和y軸的縮放倍數
scalex(x)
單獨設定x軸的縮放
scaley(y)
單獨設定y軸的縮放
n>1  放大
0<n<1 縮小
-1<n<0  縮小並反轉
n<-1 放大並反轉

③旋轉

rotate(ndeg)
n>0 順時針
n<0 逆時針
注意：
1.旋轉原點會影響旋轉效果
transform-origin:x,y;
取值：1.px為單位的數字
      2.%
      3.關鍵字  x:left/center/right   y:top/center/bottom
2.旋轉是連同座標軸一起旋轉的，會影響旋轉之後的位移效果

④傾斜

1.skew(ndeg)和skewx(ndeg)
讓y軸向著x軸傾斜ndeg，n>0逆時針，n<0順時針
2.skewy(ndeg)
讓x軸向著y軸傾斜ndeg,n>0順時針，n<0逆時針
3.同時設定x軸y軸的傾斜
skew(xdeg,ydeg)

4. 3D的轉換函式

3d都是模擬的
1.透視距離
模擬人的眼睛到3d轉換物體之間的距離，距離不同，看到的效果不同
perspective:距離  一定要設定在3d轉換元素的父元素上
2.3D旋轉
1.transform:rotatex(xdeg)  
以x軸為中心軸，旋轉。老式爆米花機，烤羊腿
2.transform:rotatey(ydeg)
以y軸為中心軸，旋轉。旋轉門，土耳其烤肉，鋼管舞
3.transform:rotatez(zdeg)
以z軸為中心軸，旋轉。電風扇，摩天輪。
4.讓3條軸同時轉
transform:rotate3d(x,y,z,ndeg);
x,y,z取值為0，代表不參與旋轉。取值為非0，代表該軸旋轉的速率

五. 過渡

讓css的值，在一段時間從一個狀態平緩的變化為另一個狀態

1.語法

①設定參與過渡的屬性

transition-property：屬性1  屬性2.......;
取值  all   所有支援過渡的屬性，都參與過渡
支援過渡的屬性，有哪些
1.顏色屬性
2.大多數取值為數值的屬性
3.陰影
4.轉換

②設定過渡時長

transition-duration
取值  s  ms

③設定時間曲線函式

transition-timing-function:
取值，1.ease 預設值，慢速開始，中間提速，慢速結束
      2.linear 勻速
      3.ease-in 慢速開始，一直加速
      4.ease-out 快速開始，一直減速
      5.ease-in-out 慢速開始，中間大幅度加速，再大幅度減速

④設定過度的延遲時間

transition-delay:

⑤過渡程式碼的編寫位置

過渡程式碼寫在原始樣式中，過渡效果有去有回
        寫在**過渡的偽類中，過渡效果，有去無回。

⑥過渡的簡寫方式

transition:property  duration  timing-fucntion  delay;
最簡方式 transition：duration;  屬性預設是all

六 動畫

1.什麼動畫

是過渡高階操作，就是一個或者多個過渡效果拼接在一起
過渡和動畫的區別

過渡	動畫
兩個css效果之間的變化	兩個或者多個css效果之間的變化
偽類**	偽類**或者F5**

2.控制的動畫的關鍵概念

用關鍵幀來控制每一個時間點執行的css值
關鍵幀
1.執行動畫的時間點
2.在這個時間點上的樣式

3.動畫的使用

①使用關鍵幀定義動畫

@keyframes 動畫名稱{
  0% | from{樣式}
  ...
  100% | to{樣式}
}

②呼叫定義好的動畫

/* 呼叫動畫的名稱 */
animation-name: change;
/* 動畫持續時長 */
animation-duration: 5s;
/* 時間曲線函式 */
animation-timing-function: linear;
/* 動畫的延遲 */
animation-delay: 1s;

專案中的動畫，90%都使用animate.css提供的動畫css

4.動畫的特有屬性

①指定動畫的播放次數

animation-iteration-count
取值，具體數值
      infinite無限

②動畫的播放順序

animation-direction: 
normal  0~100%  預設值
reverse; 100%~0   反向
alternate 奇數次normal  偶數次 reverse

③動畫的簡寫方式

animation:name  duration  timing-function  delay  count  direction;
最簡方案 animation：name duration;

④動畫開始之前和結束之後的填充方式

animation-fill-mode: 
backwards; 在delay的時間內，顯示動畫的第一幀
forwards   動畫結束之後，停留在最後一幀
both

5.動畫低版本瀏覽器相容性的問題

要在定義動畫的時候寫核心
@keyframes 動畫名稱{}
@-webkit-keyframes 動畫名稱{}
@-o-keyframes 動畫名稱{}
@-moz-keyframes 動畫名稱{}
@-ms-keyframes 動畫名稱{}

七. CSS優化

1.css優化的目的
後臺減少伺服器端壓力
提升使用者體驗
2.優化的原則
儘量減少http的請求個數（使用精靈圖、雪碧圖）
頁面的頂部，引入css檔案
將css和js放到單獨的檔案中
3.css程式碼的優化
合併樣式(群組，簡寫方式，儘量減少程式碼量)
避免出現空的src和href
程式碼壓縮

八. css reset 和 normalize.css

1.什麼是樣式重置

不同瀏覽器，對於元素的預設樣式解釋不同
導致同一css程式碼，在不同瀏覽器執行會有不同效果
我們需要css reset 把瀏覽器預設樣式進行統一
*{margin:0;padding:0}

2.css reset

沒有規則，沒有標準
css reset比較霸道，不允許元素擁有自己的特性，統一清空了
很多元素就失去了語義的特性

3. normalize.css

normalize.css是css reset一種替代方案
是一個非常小的css檔案，保留很多標籤語義特性，又同時排除了很多瀏覽器的bug
normalize.css有一個標準程式碼
沒有強制的清除某一些樣式，只是讓大家進行統一