那些傻傻分不清的選取器？

【金魚都能懂的 CSS 選取器】筆記篇 -1

我以為我會的原來只是冰山一角

好久沒更新文章，因為我一直在耍廢的狀態（眼神死），直到不久前看到有臉友分享這本【金魚都能懂的 CSS 選取器】，發現是 Amos 出的新書，所以趁 17 號 LINE Pay Money 17% 入手（大誤，這是個撿便宜心態大家不要學XD）。

回歸正傳，在寫 CSS 的時候偶爾會在網路上找選取器的文章來看，但大部分我看過的文章都比較片段、沒有系統的分類整理過，要不然就是原文（還是其實是我理解力不好？！）。看這本書第二章的部分有如醍醐灌頂，讓我想迫不急待地看完第二章節，看完當然要好好整理筆記出來！

整理的內容會包含之前看原文網頁的筆記內容，結合已知和這次所收穫的新知幫助自己加深印象！

CSS 優先權順序

第一章的部分提到 CSS 優先權順序，這部分大部分內容都算知道，算是在加深一次印象，除了動畫執行期間原來比 !important 還要優先這點我比較不清楚：

優先權從低 → 高

繼承的屬性 → ＊通用選取器 → Tag → class/屬性選取器(ex.[alt]、[alt=””]) → ID → inline style → Animation(動畫執行期間) → !important

2021.05.24 作者 Amos 大大留言：優先權的部分在第一版有誤，後面有更正為 !important 優先權會大於 animation 執行期。故修改了上面的排序。

補充：另一本書【網頁就是這麼疊出來的！】提到如果文件有多個 CSS 樣式，其優先級別為：

瀏覽器預設樣式 → 外部樣式（<link href=""）→ 內部樣式（<style></style>）→ 內連樣式（inline style）

跟上面的優先權對照後會發現， !important 算是權重最重的，在使用上真的不要濫用。

2021.05.24 Amos 補充：CSS 優先權也不是「外部樣式」 < 「內部 <style> 標籤」，他還是要看撰寫順序的，如果你的「外部樣式」的 Link 標籤寫在「內部<style>標籤」下的話，<style> 的優先權不見得會比較高，最終還是要看選取器本身的優先權才是最正確的喔。

基本類型 CSS 選取器

裡面提到的 Tag 元素選取器、class 類別選取器、ID 選取器、群組式宣告、組合式宣告、層疊式宣告、＊通用選取器、屬性選取器、親代選取器和子代選取器。

在這篇我只會整理組合式宣告、層疊式宣告，屬性選取器、親代選取器和子代選取器會留到下一篇整理，我需要花點時間消化吸收，至於其他部分大家買書來看絕對不後悔喔！

組合式宣告：用在同一個物件上，同時符合的才能選取到。

我看這本書才知道原來這叫做組合式宣告，在 CSS 的寫法每個選取器之間是沒有空格的，寫法如下：

HTML:

<h1 class="className" id="idName"></h1>

CSS:

h1.className#idName {} 
h1#idName.className {}

實際使用： 可以凸顯作用中的項目。

HTML:

<li class="nav-item">
  <a class="nav-link active" href="#sample">...</a>
</li>

CSS:

.nav-link.active {...}

然後在 SCSS 使用的時候要用 & 連接 class 之類的選取器，一樣和 & 之間不能有空格。

SCSS:

.nav-link {
    &.active {...}
}

在這小節我終於搞懂組合式宣告的使用方式了（歡呼），感謝 Amos！學 SCSS 的時候會用到 & 但我一直對這個的使用方法懵懵懂懂。

層疊式宣告：後代選取器，物件 A 的後代且後代是 B 物件即可被選取。

層疊式宣告和組合式宣告不一樣的是，在 CSS 寫法是每個選取器之間有空格區隔，寫法如下：

HTML:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active">...</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active">...</a>
  </li>
</ul>

CSS:

.nav li {...}
.nav li a {...}

然後 SCSS 的巢狀結構其實就是在用層疊式宣告，請記得盡量不要使用超過三層的巢狀結構，再次提醒自己。

SCSS:

.nav {
    li {
        ...
        a {
        ...
        }
    }
}

小結

這篇筆記只整理了少少的部分，組合式宣告之前都是隨便使用現在總算搞清楚要如何使用了，感謝臉友讓我發現這本書，也感謝 Amos 出了這本書。

屬性選取器要整理消化吸收的東西比較多只好留到下次再講了！希望下一篇可以早日生出來！（搖肩，不要再耍廢了 XD

題外話，這本書算是稍微讓自己找到一些動力，在新的工作中開始切版也一年多了，但覺得自己好像沒什麼長進，我不知道自己寫的 CSS 如何改進，沒人 code review 所以進步的幅度有限，只用本來就會的東西得過且過，所以就慢慢失去持續學習的動力。然後看了這本書才發現我懂的東西真的只是冰山一角，網頁技術要學的東西還多的呢！希望自己能持續保有學習的動力！