目次
1. class
2. id
3. element
4. attribute
5. pseudo-class
6. CSS Specificity
上次介紹完 HTML 後就正式進入到 CSS 的領域啦～
還沒有看過我的文章、對 HTML 不熟的，下面連結有簡單的介紹喔
首先先簡單介紹一下 CSS
CSS
全名 Cascading Style Sheets 層疊樣式表
和 HTML 互相搭配，藉由選擇器美化、佈局網頁（調整顏色、位置、字體大小間距…等）
CSS 要學的範圍很廣泛，首先最重要的就是 selector 了
正如上文所說， HTML 和 CSS 是互相搭配的
由 HTML 定義區塊的意義，由 CSS 美化
而選擇器可以幫助我們選到正確的元素，幫他加上樣式
就像上面那張很多門的圖，如果只有他是黃色，我們就要透過適當的選擇器套用樣式
我自己對於選擇器的使用還不是很靈活
我是透過一個 GitHub Page 的小遊戲學習的
大家有興趣可以玩玩看，以下是我遊玩時學到的選擇器
選擇器
在開始之前要先了解選擇器的種類：
在講解 HTML 時，有講到 class這個 attribute
class 是一個群組的概念，當我在標籤上掛上一樣的 class名稱，就能在 CSS 統一套用他的樣式表
當然也能只套用在某標籤上
id
另一個和 class 十分相像的 attribute 就是 id
和 class不同， id是一個指定的概念class可以提供給很多 HTML 標籤使用，但 id只有一個，用於細項的指定
element
當你想統一套用樣式在標籤上 ex. <p>、 <div>…..等
就可以直接將標籤當作選擇器
若是要指定標籤中的標籤 ex. <div> <p></p> </div>
也可以複選 element 或是其他選擇器，但兩個須是同層級的標籤、類型
若要全選某標籤或特定標籤的所有元素，可以使用 *
若想全選，除了某類型之外（A: not(#id)）
ex. p:not(#fancy)
也可以選擇無任何子元素的某 A 標籤內（A: empty）
標籤的選擇十分多元化，善用這些選擇方式可以減少 class 和 id 的使用
- 選擇「所有在A標籤、類型後一個」某A1同層級的標籤（A + A1）
- 選擇「在A標籤、類型後所有」某A1同層級的標籤（A~A1）
- 選擇A標籤、類型內特定B子標籤（A > B）
一個#container > ul的選擇僅僅會選中那些包含id名container的div下的直接子對象ul
attribute
除了 class 、 id 以外，也有用於選擇其他 HTML 屬性的選擇器喔
ex. <a href="a">a</a> <a href="b">b</a> <a href="c">c</a>
當然也可以指定我要選擇某標籤、類型內特定屬性
或是指定選擇某A標籤、類型內特定屬性的值
ex. <span> <a href="ahead"></a> </span>
更進階的是，他可以選擇某A標籤、類型內特定屬性值的「開頭」字/字串
命名好的話，一次可以選複數個元素
ex. <a herf="ahead"> / <a herf="android">
有開頭字串，當然也有結尾字串
選擇某A標籤、類型內特定屬性值的「結尾」字/字串
ex. <a herf="android"> / <a herf="understand">
或是可以選擇某A標籤、類型內特定屬性值內任一字串（ A[attribute*=” and ”]）
ex. <a herf="android"> / <a herf="understand"> / <a herf="Mandy">
pseudo-class
除了上述我們常看見的方式，還有一種選擇器名叫虛擬類別
可自訂狀態選擇套用某樣式
- 選擇在同層級標籤中的第一項（A:first-child）
ex.
2. 選擇在A標籤、類型內，只有B子標籤的那項（A B:only-child）
ex.
3. 選擇在同層級標籤中的最後一項（A:last-child）
ex.
4. 選擇在同層級標籤中，第 n 項的某A標籤、類型（A:nth-child(n)）
ex.
5. 選擇在同層級標籤中，倒數第 n 項的某A標籤、類型（A:nth-last-child(n)）
ex.
6. 選擇「符合」A標籤、類型內的第一項（A:first-of-type）
ex.
7. 選擇「符合」A標籤、類型內的第 an+b 項或第 n 項或偶數項(even)/奇數項(odd)（A:nth-of-type(an+b)）
＊ an+b，會從第0開始帶入
8. 選擇「符合」A標籤、類型內，只有B子標籤的那項（A B:only-of-type）
ex.
但可惜的是結果不盡其然，竟然出現了錯誤
點擊下方連結，我在 CSS 有做 only-of-type 和 only-child 的比較
9. 選擇「符合」A標籤、類型內的最後一項（A:last-of-type）
以上乍看之下有許多重複，且讓人無法理解的是 only-of-type 居然出了錯
-child v.s. -of-type
-child：不需是 A 類型或標籤就無法被選擇
-of-type：只看要選擇的 A 類型或標籤
參考連結：https://juejin.im/entry/59448f7aa0bb9f006ba42e19
CSS Specificity
上述簡單的條列一些選擇器的種類
但有沒有一種情況是已被選擇的元素又被選擇呢？！
若被重複選擇，又該套用哪種樣式？
於是這張圖就出現了～～
簡單來說是這樣運算的：
全選：0- 0- 0
element：0- 0- 1
class & attribute & pseudo-class：0- 1- 0
id：1- 0- 0
style (inline CSS)：1- 0- 0- 0
!improtant：1- 0- 0- 0- 0
依照涵蓋的項目相加，只要其中一種組合大於另一種，就會套用該樣式
這裡也要注意一點
!improtant 為最高層級，雖然很好用也有疊加效果
但千萬不要經常使用！
以免造成程式碼不好維護
以上就是我簡單的 CSS selector 筆記，真的是有夠多種的
但其實不只這些，還有很多選擇器沒有寫上去
目前我有看到一篇中文的可以簡單補充一下
真的是要常用才會熟悉啊！
如果是初次接觸真的可以玩一下 CSS Diner 喔～
不過我覺得他一開始挫折感蠻大的，可以搭配我的筆記看先找答案
多玩幾次慢慢學
希望總有一天我會成為選擇器小達人嗚嗚嗚
拍個手讓我知道，這個文章對你們有幫助 ♥(´∀` )人
