CSS 入門筆記(二) CSS Selectors

承上一篇CSS 入門筆記(一) Box Model & Box-sizing 的文章，這篇則接著彙整CSS常見的選擇器的一些基本觀念。

型態選擇器 Type Selector

1. Type selector會將其定義的CSS樣式套用於同一頁面中”所有”同型態(Type)的元素/標籤上。
2. CSS語法：

element {
Style properties
}

Reference: Type Selectors

類別選擇器 Class Selector

1. Class selector會將其定義的CSS樣式套用於同一頁面中歸類/命名為同類別名稱的元素/標籤上。同一個類別名稱的類別選擇器在同一個網頁中是可以重複被使用的。
2. CSS語法：

.class_name {
Style properties
}

Reference: Class Selectors

ID選擇器 ID Selector

1. ID Selector會將其定義的CSS樣式套用於同一頁面中唯一一個ID命名相同的元素/標籤上，也就是說同一個頁面中一個ID名稱只會出現一次而並不會重複出現。
2. ID的名稱命名只能由英文字母、數字及下底線組成，且不能以數字作為開頭。
3. ID的名稱命名也不能與HTML標籤的名稱相同。
4. CSS語法：

#ID_value {
Style properties
}

Reference: ID Selectors

通用選擇器 Universal Selector

1. Universal selector會將其定義的CSS樣式套用於同一頁面中的任何元素/標籤。
2. CSS語法:

* {
Style properties
}

Reference: Universal Selector

繼承選擇器 Descendant Selector

1. 繼承選擇器最少由兩個元素/標籤或選擇器所組成，而CSS樣式的定義則是套用在第一個元素/標籤或下面的第二個元素/標籤及之後所有的元素/標籤上，套用在第一個選擇器或下面的第二個選擇器及之後所有的選擇器上。
2. 繼承選擇器可以透過空格繼續一直延續下去。
3. CSS語法：

element1 element2 {
Style properties
}
Selector1 Selector2 {
Style properties
}

Reference: Descendant Selector

子元素選擇器 Child Selectors

1. 子元素選擇器 Child Selector 最少由兩個元素/標籤或選擇器所組成，而CSS樣式的定義則只套用在第一個元素/標籤或下面的第二個元素/標籤上，或只套用在第一個選擇器或下面的第二個選擇器上。也就是說與繼承選擇器不同，第二個元素/標籤或選擇器之後的元素/標籤/選擇器都不受影響。
2. 子元素選擇器可以透過>繼續延續下去。
3. CSS語法：

element1 > element2 {
Style properties
}
Selector1 > Selector2 {
Style properties
}

Reference: Child Selector

通用兄弟選擇器 General Sibling Selector

1. 通用兄弟選擇器 General sibling selector 由兩個在同一個父元素(parent element)下的元素/標籤所組成，而CSS樣式的定義則套用在第一個元素/標籤之後與第二個名稱相同的所有元素/標籤上。
2. 無論第一個元素/標籤與第二個第一個元素/標籤之間有沒有被間隔開。
3. CSS語法：

former_element ~ target_element{
Style properties
}

更多的Selectors