css selector 自己看

• : 選全部
  . : 選 class
  // # :選 id
  .classＡ.classB: 符合這兩個 class 才會被選到
  .classA .classB: classA 下面的所有 classB 都會被選到 （中間有空格）
  .classA + .classB: classA 旁邊的 classB 會被選到（要在同一層）
  .classA ~ .classB: classA 右邊所有的 classB 都會被選到 （要在同一層）
  ### hover

  span:hover {
  background: red;
  }

nth-child

.wrapper div:nth-child(1,2,5...even,odd){
background:red; 
}

在 wrapper 下面的第n個 div
要注意的是這個選擇器會先從後面看出來
例如說如果想要選 class 為 important 的第 2 個

div .important:nth-child(4){
background:red;
}

<div>
    <span>1</span>
    <span class="important">2</span>
    <span>3</span>
    <span class="important">4</span>
    <span>5</span>
</div>

為什麼要這樣寫呢？ 因為選擇器會先看 div 下面的第四個元素，再檢查是否符合 important 這個 class。
所以假如寫div .important:nth-child(2) 是第一個 important class 被選到喔！
還可以這樣寫：nth-child(2n) 就換選到 2 的倍數。n 會從 0 開始喔！
也可以寫 nth-child(3n - 2) 之類的..