CSS ? 嗯~ 要吃吃看嗎?

CSS 選擇器

選擇器（Selector ，也有些人稱之選取器）的種類及應用。

選擇器，顧名思義就是選擇您要定義 CSS 的位置。其種類大約分成以下幾種：

1. Class selectors（Class選擇器）
   「.」開頭，名稱可自訂，一張網頁可有多個class屬性值。

2. ID selectors（ID選擇器）
   「#」開頭，名稱可自訂，一張網頁只能有一個ID屬性值。

3. Type selectors（型態選擇器，因為套用於HTML標籤）
   設定於HTML的標籤上，網頁上所有的標籤都會套用。

4. Universal selector（通用選擇器）
   使用字元「*」，整張網頁下的所有元素都會套用設定。

5. Attribute selectors（屬性選擇器）
   針對有套用特定屬性的標籤做CSS設定。例如：

   燈[燈罩] //套用於含"燈罩"屬性的"燈"標籤（簡易屬性選擇器）
   燈[是否開啟=true] //套用於"是否開啟"屬性值為"true"的"燈"標籤（精確屬性選擇器）
   燈[零件~=燈泡] //套用於"零件"屬性值包含"燈泡"的"燈"標籤（部份屬性選擇器）

6. Descendant combinator（後代選擇器）
   A B，利用"空白"區隔兩個元素，表示在 A 元素內的 B 元素才會套用。

7. Child combinator（子選擇器）
   A > B，利用">"區隔兩個元素，表示在有父子關係的元素(例如: <A><B></B></A>)才會套用。
   與後代選擇器不同的是 A 及 B 元素之間不能再插入其它的元素(例如:<A><C><B></B></C></A>)，否則就不是父子關係了。

8. Adjacent sibling combinator（同層相鄰選擇器）
   A + B，利用+區隔兩個元素，表示在與 A 同一層關係的相鄰 B 元素才會套用。

9. General sibling combinator（同層全體選擇器）
   A ~ B，利用~區隔兩個元素，表示在與 E 同一層關係的 F 元素全部都會套用。

10. Groups of selectors（群組選擇器）
    A , B , C ，利用"," 隔開元素們，同時對多個選擇器定義樣式。

CSS 晚餐

如果自認英文還不錯的話，可以去看看 CSS Diner。 在裡面可以學到很多CSS選擇器的用法。