CSS選擇器類型介紹(進階篇)
Day9介紹了CSS選擇器(簡單篇)，今天就來教大家進階篇的一些技巧吧。
以下範例，為了方便大家閱讀，我就不使用完整的HTML格式。若還不知道完整HTML格式的朋友可以參考Day4
組合選擇器 (Combinator selectors )
有時候，你可能會希望透過一些條件，來設計網站的CSS樣式。我們先看以下範例：
解釋：
| combinators | 範例 | 說明 |
|---|---|---|
| 空格 | div p { background-color:pink; } | 在div標籤內，所有p標籤，背景顏色為粉紅色。 |
| > | div > p { color:blue; } | 父標籤為div下，所有p標籤，字體顏色為藍色。 |
| + | div + p { text-align:center; } | 在div標籤後，第1個p標籤，文字置中。 |
| ~ | div ~ p { font-size: 24px; } | 若在div標籤後，所有的p標籤，字體大小為24px。 |
組合選擇器讓我們可以透過上述方式去任意組合選擇器，以達到我們想要的效果。
擬態類別選擇器 (Pseudo-classes)
擬態類別選擇器，主要是用來定義一個特別的狀態。以下我們使用連結<a>來作為範例。
大家可以試著將滑鼠移動到文字內容上，看看會發生什麼事情。
<a>連結的標籤hover擬態類別選擇器，hover表示當滑鼠經過的這個狀態。- color 定義連結內容的顏色，在CSS稱為特性(Proterty)。
- red 定義要呈現的顏色，在CSS稱為設定值(Value)。
- 記得設定完每個特性後，要加上
;表示結束。
針對<a>連結標籤，還有以下幾種擬態類別選擇器：
| Pseudo-classes | 說明 |
|---|---|
| hover | 表示滑鼠經過的這個狀態 |
| link | 表示還沒到過這個連結的狀態 |
| visted | 表示已經到過這個連結的狀態 |
| active | 表示滑鼠點擊的這個狀態 |
擬態類別選擇器是一個滿常用的CSS寫法，上述介紹只是其中的4個，大家可以到此網站的最下方，這邊列出了所有的擬態類別選擇器。 大家可以看看有沒有想要的效果。
總結
介紹了這麼多選擇器，其實最重要的還是能否將你心目中的網站效果呈現出來。 畢竟CSS有太多種方式可以來設定網站樣式，因此建議大家可以先學會幾種設定方式。 後續，再來精進。