# 預習

## 0612

### 青蛙
* justify-content
* align-items
* align-content: 多行(單行無效)距離種類
* align-self: 單一個移動上下左右，使用時align-content將對此元素無效
* flex-wrap: 是否換行或換行顛倒
* flex-direction: 順序顛倒
* flex-flow: flex-wrap + flex-direction
* order: 指定位置 or 下面
* order: 1 //移動到最後
* order: -1//移動到第一個

青蛙問題: align-items與align-content差別

### 選取器
* 組合式宣告
`p.amos#handsome{ ...略 }`
* 群組式宣告 使用逗號(,)
* css reset
* HTML屬性選取
1. 屬性完全等於 `[屬性=值]`
2. 開頭等於 `[屬性^=值]`
3. 結尾等於 `[屬性$=值] `，文字大小寫有別
4. 包含特定文字 `[屬性*=值]`
5. 包含特定單字 `[屬性~=值]`
6. 開頭等於特定文字或包括 - 號 `[屬性|=值]`
* 妹妹選取器 只選後面一個
* 鞭炮選取器 `選取對象A ~ 選取對象B`，也就是選取對象 A 同層後方的所有 B
* 子代選取器 (>)
* 偽類選取器
* 超連結的動態僞類選取器
1. 【尚未點擊】:link
2. 【滑鼠觸碰】:hover
3. 【點擊當下】:active
4. 【取得焦點】:focus
5. 【點擊過後】:visited
* 過程的順序 0 -> 5 -> 2 -> 3
* focus 跟 hover 想要的效果可以決定兩者順序
* ::after 與 ::before
* ::selection 選取狀態選取器
* :checked 表單狀態選取器
* :disable 與 enable 表單用偽類選取器
* empty空值選取器
如果有空格也不能選取到
* :nth-child() & :nth-last-child()
* :first-child & :last-child 頭尾選取器
* 直接看順序
* :first-of-type & :last-of-type 首項分類與尾首分類選取器
* :first-of-type先做分類，在挑順序
* nth-of-type 與 last-nth-of-type
* root 根目錄選取器
* :not() 否定選取器
* :lang 語言僞類選取器

# 未預習

### 選取器
* :only-of-type 類型獨子選取器
* :only-child 獨子選取器
* ::first-line 首行選取器
* :first-letter 首字選取器