在寫純 CSS 套用樣式時，最常用的選擇器大概就 標籤名稱 、 class 名稱 、 * ，再不然就 標籤名稱 class名稱 ，其他的我比較少用，也就常常忘記了，但偶爾還是會看到其他人用各樣的選擇器，真的是多一個空格、一個點、一個符號，選取出來的元素就都不一樣了，就趁這次記錄下來吧！
這次要筆記的就是：
CSS 選擇器 ( CSS Selectors )
快速尋找
1. div .a.b
說明：
在 <div> 標籤裡面，選取 class 名稱同時為「a」和「b」的元素
範例：
在方形裡面的，將元素名稱同時為 circle 和 blue 的元素變成藍色
HTML / CSS：
2. div .a .b
說明：
在 <div> 標籤裡面，先找到 class 名稱為「a」的元素，再從 a 元素底下選取 class 名稱為「b」的元素
範例：
在方形裡面，將第一層元素名稱為 circle 並且第二層元素名稱為 blue 的元素變成藍色
HTML / CSS：
3. div .a
說明：
在 <div> 標籤裡面，不論幾層，只要 class 名稱為「a」的元素都會被選取起來
範例：
在方形裡面，將所有元素名稱為 circle 的元素都變成藍色
HTML / CSS：
4. div > .a
說明：
在 <div> 標籤裡面，只有第一層的 class 名稱為「a」的元素才會被選取起來
範例：
在方形裡面，只將第一層元素名稱為 blue 的元素變成藍色
HTML / CSS：
5. div + .a
說明：
在 <div> 標籤後面緊接相鄰著，並且 class 名稱為「a」的元素才會被選取起來，中間不可以有其他元素插入
範例：
將緊接在第一個矩形後面的第二個元素名稱為 rectangle 的元素變成藍色
HTML / CSS：
6. div ~ .a
說明：
在 <div> 標籤後面相鄰著，只要 class 名稱為「a」的元素都會被選取起來，中間可以有其他元素插入
範例：
將第一個矩形後面所有元素名稱為 rectangle 的元素都變成藍色
HTML / CSS：
7. div .a:first-child
說明：
在 <div> 標籤裡面，將第一個 class 名稱為「a」的元素選取起來
範例：
將方形裡面，只將第一個矩形變成藍色
HTML / CSS：
8. div .a:last-child
說明：
在 <div> 標籤裡面，將最後一個 class 名稱為「a」的元素選取起來
範例：
將方形裡面，只將最後一個矩形變成藍色
HTML / CSS：
以上，就這樣囉！