# [CSS] 優先權

###### tags: `CSS`

* 選到同一個物件才有優先權的判斷和比較
* 明確性越高，優先權越高
* 相同選取器下，原始碼順序後者蓋掉前者
* 優先權大至小
1. 具備 `!important` 的 CSS 屬性
2. Animation（動畫執行期間）
3. inline style
4. ID
5. class、pseudo-class 偽類、屬性選取器
6. Tag、pseudo-element 偽元素
7. \* 號萬用選取器
8. 繼承而來的屬性
* 若有使用 `@layer`，參考 [[CSS] @layer 筆記內的優先權](https://hackmd.io/@yuna9068/SJ9JT0Alh#優先權)

## 選取器分數

| 選取器 | 分數 |
| ------------------------------------------------------------ | ------- |
| ID | (1,0,0) |
| class、pseudo-class 偽類、屬性選取器 | (0,1,0) |
| Tag、pseudo-element 偽元素 | (0,0,1) |
| * 號萬用選取器、繼承、`:where()`、`+`、`>`、`~`、後代選取器、`\|\|` | (0,0,0) |

* `:nth-child()`、`:nth-last-child()` 會將本身 pseudo-class 再加上 `()` 中的選取器計算分數
* `:nth-child(even of li, .item)`：(0,2,0)
* `:nth-child(even of li)`：(0,1,1)
* `:is()`、`:not()`、`:has()` 會依據 `()` 中的選取器計算分數
* `:is(em, #foo)`：(1,0,0)
* `:is(em)`：(0,0,1)
* `:not(em, strong#foo)`：(1,0,1)
* `:where()` 不計分
* `.qux:where(em, #foo#bar#baz)`：(0,1,0)
* `*` 不計分
兩者優先權相等，後面會蓋掉前面，故 `.box` 的顏色會是 `#000000`

    * .box {
      background: #ffaacc;
    }

    .box {
      background: #000000;
    }

* 比較分數時從最左側開始，數值相同才比下一個數值
`#primary` 的分數為 (1,0,0)，`.a.b.c.d.e.f.g.h.i.j.k` 的分數為 (0,11,0)，無論有多少個 class，優先權仍低於 ID，故 `div` 內的文字 color 為 `#0000ff`

  <div id="primary" class="a b c d e f g h i j k">color</div>

  #primary {
    color: #0000ff;
  }

  .a.b.c.d.e.f.g.h.i.j.k {
    color: #ff0000;
  }

* 同分時，後者覆蓋掉前者
`* div` 和 `body *` 分數皆為(0,0,1)，`body *` 撰寫順序在 `* div` 後面，故 `div` 內的文字 color 為 `#00ff00`

  <div>color</div>

  * div {
    color: #ff0000;
  }

  body * {
    color: #00ff00;
  }

### 權重分數計算網站
* [CSS Selector Specificity Calculator](https://polypane.app/css-specificity-calculator/)
* [Specificity Calculator](https://specificity.keegan.st/)

## 設定超連結狀態的撰寫順序
1. `a`
2. `a:link`：尚未點擊，有 `href` 屬性才有作用
3. `a:visited`：點擊過後
4. `a:hover`：滑鼠觸碰
5. `a:active`：按住，點擊當下
6. `a:focus`：取得焦點

但實務上還是要看需求，需求有可能是造訪過的連結不希望 hover 有變化，那就得調整順序將 `:visited` 放在 `:hover` 後面

## 參考資料
* [Calculating a selector’s specificity](https://www.w3.org/TR/selectors-4/#specificity-rules "W3C Selectors Level 4")
* [李建杭（Amos），《金魚都能懂的 CSS 選取器：金魚都能懂了你還怕學不會嗎》（博碩文化，2020），第1-3章、第4-2章。](https://www.drmaster.com.tw/Bookinfo.asp?BookID=MP22010)

---

:::info
建立日期：2024-02-25
更新日期：2024-02-25
:::