從基礎到進階- CSS 選擇器的70種用法【一】

CSS 全名是(Cascading Style Sheets, CSS)，中文為層疊樣式表。是網頁語法的一部分，通常與 Html 語法搭配、用來設計網頁的外觀。換句話來說，Html 語法就像人的骨骼與肌肉，構築出網頁的內容與架構；而 CSS 則像衣服與配件，用來妝點外觀。

中文為〝層疊樣式〞，其實很能表現出 CSS 的特性：可以一層一層的疊上樣式。也因此、選擇器的操作界就變得非常重要，畢竟：

選的到，就改的到

CSS 的基本是由元素(element)加上屬性而成，基本寫法如下：

選擇的元素{
    屬性:值;
}

例如最常見的，就是我們會指定字體：

body{
  font-family: 'Noto Sans TC';
}

在 HTML中，各元素是以多個 DOM 架構結合而成，DOM 全名為 Document Object Model、或稱文件物件模型，概念就是：每個元素都有預設的標籤、去宣告這段的作用，例如段落的<P>、超連結的<a>，或是內容區塊的<div>等元素；而每個元素也都可以指定”名稱”給他，不管是ID、Class Name 或 Tag 等等，以及呼應狀態的偽類等，透過以上組合，搭配選擇器的技巧，就能輕鬆打造出千變萬化的網頁囉！

因此，不用我再說明、應該不難理解選擇器為何如此重要了吧？畢竟如果選不到元素，那就更別說要修改了。

以下介紹在 CSS 中，有那些選擇的方法：

基本選擇器：

基本選擇器的邏輯很簡單，就是針對所指定的元素、屬性、類別、標籤、ID或名稱，讓它改變元件外觀，如下：

通用選擇器 (Universal selector)

目標：選擇所有元素，通常用於 CSS 檔案一開始、宣告所有的字體、顏色、風格等；或用於 CSS 設定歸零時使用。
語法：*(任何預設或自定義的元素)
範例：

See the Pen CodePen Home CSS * Selector by Build Something (@BuildSomething) on CodePen.

元素選擇器 (Type selector)

目標：選擇所指定的元素，例如 div、p、a 等，詳細可參考：MDN-HTML 元素。
語法：element
範例：

See the Pen Type selector by Build Something (@BuildSomething) on CodePen.

類別選擇器 (Class selector)

目標：選擇所指定的類別名稱。
語法：.class-name
範例：

See the Pen Class selector by Build Something (@BuildSomething) on CodePen.

ID選擇器 (ID selector)

目標：選擇所指定的ID名稱。
語法：#ID-name
範例：

See the Pen Class selector by Build Something (@BuildSomething) on CodePen.

子選擇器 (Child selector)

目標：選擇包含特定上層元素的子代元素
語法：elementA>elementB
範例：

See the Pen Child selector by Build Something (@BuildSomething) on CodePen.

後裔選擇器 (Descendant selector)

目標：選擇包含特定上層元素的子代或孫代元素。
語法：elementA elementB
範例：

See the Pen Descendant selector by Build Something (@BuildSomething) on CodePen.

子選擇器 與 後裔選擇器 在實作上很容易搞混因為二者同時都對子代元素為其設置樣式；但不同的是、子選擇器 僅影響子代元素；而 後裔選擇器 可影響子代及孫代(含以下層級)

相鄰選擇器 (Adjacent selector)

目標：僅選擇緊跟在上層元素之後的第一個元素並為其設置樣式。
語法：elementA+elementB
範例：

See the Pen Adjacent selector by Build Something (@BuildSomething) on CodePen.

同層全體選擇器 (General sibling selector)

目標：以 ( ~ ) 分隔兩個選擇器並匹配第二個元素的疊代，這些疊代在第一個或若干元素之後，並且是同一個上層元素的子元素。
語法：elementA~elementB
範例

See the Pen General sibling selector by Build Something (@BuildSomething) on CodePen.

交集選擇器(Intersection selector)

目標：選擇二者或二者以上的元素，所選擇的元素必須同時存在同一層級時才會被選取。
語法：elementAelementB(指定二者或二者以上的元素，中間無空格或逗點分隔)
範例

See the Pen Intersection selector by Build Something (@BuildSomething) on CodePen.

並集選擇器(Selector list)

目標：同時宣告多個元素的屬性。
語法：elementA,elementB(指定二者或二者以上的元素，中間以逗點分隔)
範例

See the Pen Selector list by Build Something (@BuildSomething) on CodePen.

偽元素 (Pseudo Elements)：

CSS中的「偽元素」之所以稱作「偽」，是從英文的「Pseudo」翻譯而來。因為它並不是真正網頁裡的元素、但行為與表現又和真正網頁元素一樣，也可以對其使用 CSS 設置樣式。在 W3C 的定義裡總共有五個偽元素，分別為：::before、::after、::first-line、::first-letter和::selection，為了和偽類(pseudo-class)區分，偽元素使用兩個冒號「::」開頭，而偽類使用一個冒號「:」開頭

::before 與 ::after

目標：某屬性的之前(before )或之後(before )，可以搭配 “content” 填充預設內容，例如底線或符號。
語法：element::before 或 element::after
範例

See the Pen before and after by Build Something (@BuildSomething) on CodePen.

::first-letter

目標：某屬性的第一個字元。
語法：element::first-letter
範例

See the Pen first-letter and first-line by Build Something (@BuildSomething) on CodePen.

::first-line

目標：某屬性內容第一段的字元。
語法：element::first-line
範例

See the Pen CSS ::first-line by Build Something (@BuildSomething) on CodePen.

::selection

目標：變更選取狀態下。
語法：element::selection
範例

See the Pen CSS ::selection by Build Something (@BuildSomething) on CodePen.

屬性選擇器 (Attribute selector)：

屬性選擇器是選擇具有html屬性的元素標籤，並對其設置樣式，常見的html屬性例如 div、a、p、ul 等，

元素名稱[屬性名稱]

目標：包含某元素的某屬性。
語法：element[attribute]
範例

See the Pen Attribute selector-01 by Build Something (@BuildSomething) on CodePen.

元素名稱[屬性=值]

目標：包含某元素的某屬性，並且等於特定的值。
語法：element[attribute=”value”]
範例

See the Pen Attribute selector-02 by Build Something (@BuildSomething) on CodePen.

元素名稱[屬性~=值]

目標：包含某元素的某屬性，並且包含特定的值。
語法：elementA[elementB~=”value”]
值的內容如非拉丁字元則該值前後需加上空格才能被辨識
範例

See the Pen Attribute selector-04 by Build Something (@BuildSomething) on CodePen.

元素名稱[屬性|=值]

目標：包含某元素的某屬性，並且包含特定的值為開頭。
語法：element[attribute|=”value”]
值的內容如非拉丁字元則該值前後需加上空格才能被辨識
範例

See the Pen Attribute selector-03 by Build Something (@BuildSomething) on CodePen.

元素名稱[屬性^=值]

目標：包含某元素的某屬性，並且包含特定的值。
語法：element[attribute^=”value”]
範例

See the Pen Attribute selector-05 by Build Something (@BuildSomething) on CodePen.

元素名稱[屬性$=值]

目標：包含某元素的某屬性，並且包含特定值的結尾。
語法：element[attribute$=”value”]
範例

See the Pen Attribute selector-06 by Build Something (@BuildSomething) on CodePen.

元素名稱[屬性*=值]

目標：包含某元素的某屬性，並且其中任意位置包含特定值。
語法：element[attribute*=”value”]
範例