本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～

前言

經過 Day02 的介紹相信大家對於 CSS 已經有了初步的瞭解，接下來筆者要介紹的內容可以說是 CSS 的精髓，學會 CSS Selectors 了才能算是真正的學會了 CSS ，其實筆者在 Day02 的時候就已經偷偷的教了大家兩個 CSS Selectors 了，那就是 .class 以及 #id，這兩個其實就是 selectors 裡面的成員喔！接下來筆者將會更詳細的介紹幾個常用的 selectors ，廢話不多說馬上開始吧！

什麼是CSS選擇器(CSS Selectors)

看到名字就知道這是負責去選取事物的，其實 select 這個名詞在 CSS 中扮演的是一種模式，這個模式就是負責去找尋指定的 element，而 selectors 就是負責去實踐這個模式的重要工具。

為何需要CSS選擇器

CSS 在網頁所扮演的角色就是負責打扮整個網頁的樣式，可以想像成在一個群體中只有一位化妝師要負責去打扮這個群體裡所有的人，其中這個群體的每位人物都會有屬於自己的裝扮，這時候化妝師就必須要用一些方法去挑選這裡頭的人來進行化妝，selectors 就是這種存在，一個網頁裡面會有非常多的 element，而 CSS 要如何讓這些 element 可以正確的擁有自己的 style ，就必須要依靠 selectors 去找尋這些 element 了。

常用的CSS選擇器

筆者在這邊挑選幾個自己在開發網頁中最常使用的 selectors，想知道更多詳細的 selectors 可以參考這個網站。

選擇器主要可以分成以下四大類： 單純選擇器(Simple Selectors) 、 組合選擇器(Combinators) 、 偽類別(Pseudo-Class) 、 偽元素(Pseudo-Element)

• 單純選擇器(Simple Selectors)

  這邊介紹的選擇器都只有單純的選取某一個 element 或者是符合此條件的全部集合。

  • *

    這個符號就是一個星星，* 這個東西在 selectors 裡面扮演的就是全部事物，所以會選取到 HTML 內的所有 element 。

  • element

    element 就是指這個被選取到的 element 全部都會有相對應的樣式，雖然也是全部的概念但是跟 * 不一樣喔！

  • .className

    .className 代表只要 element 的 class attribute 其 className 與 .className 一樣就會被選取到。

  • #idName

    #id 代表只要 element 的 id attribute 其 idName 與 #idName 一樣就會被選取到。

接下來要來講點跟 attribute 有關的了，這邊的 attribute 並不包含 global attribute 喔！

只要是寫跟 attribute 有關的都一定要用 [] 包起來，這邊會用兩張圖來描述 attribute 的相關寫法。

比較上面兩圖後可以發現，如果單純只在 [] 裡面寫上 attribute 的話，代表全部有這個 attribute 的都會被選取到，但假如我又在 attribute 後方加上數值的話就代表要完美符合這個條件的才會被選取到。

• 組合選擇器(Combinators)

  • element1, element2, ...

    這個代表的是 element1 以及 element2 都會有一樣的樣式。

  • element1 element2 ...

    這個代表的是只要有被 element1 包起來的 element2，其 element2 會有相對應的樣式，簡單來說 空白 這個 selector 不管你的 element2 在哪一層，只要他被 element1 包起來就會被選取到。

  • element1 > element2 > ...

    這個代表的是 element1 下一層的 element2 ，其 element2 會有相對應的樣式，這個 > 跟上面的空白不一樣，這個就比較嚴謹一點了，這個僅限於 element1 的下一層，只要 element2 不是在 element1 下一層的都不會被選取到。

  • element1 + element2 + ...

    這個代表的是在同一層中緊接在 element1 的 element2，其 element2 會有相對應的樣式，也就是這個條件要符合的第一個重要元素就是兩個 element 彼此要為 siblings ，這邊用敘述的可能會有點抽象，會以程式碼的方式方便大家理解。

  

• 偽類別(Pseudo-Class)

  • element:nth-child(n)

    這個代表的是所選取到的 element，其第 n 個 element 會有相對應的樣式，這邊要注意一點：一般程式語言的起始 index 為 0 ，可是 CSS 的起始 index 為 1 ，所以在指定 n 的時候不要指定錯了喔！

  

  • element:hover

    hover 的動作就是指讓滑鼠游標移動到 element 上，並且不讓這個游標離開該 element ，通常會用這個樣式都是為了提醒使用者這個 element 是有功能的。

  

• 偽元素(Pseudo-Element)

  最後來講兩個最奇特的 selectors ： ::after 以及 ::before 。

  看到 偽元素 大概就猜想得到這個是一個假的元素是不存在的，沒錯這兩個 selectors 其實跟一般 selectors 要做的事情比較不一樣，這兩個要做的事情是在網頁中插入一些不存在於 HTML 上的內容，而非單純的只有選取 element 而已，而這兩個偽元素也非常直觀，看名字就知道一個是在 element 後面加上偽內容另一個則是在前面，這邊舉一個最常使用的例子： clearfix 。

  所謂的 clearfix 就是為了不讓子元素高度超過父元素而導致頁面看起來很醜陋，並利用 ::after 以及 ::before 來達到父元素自動撐開高度的效果，詳情可以參考這個範例。

總結小練習

最後用ㄧ個簡單的小練習來總結一下上面所講的 selectors ， selectors 是學網頁不可或缺的重要觀念， selectors 一定要學好才能輕鬆駕馭網頁，所以在學習網頁的過程中不妨多花一些時間在 CSS selectors 上面吧！