---
# System prepended metadata

title: '[CSS] 優先權'
tags: [CSS]

---

# [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`
    ```css
    * .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`
  ```htmlembedded
  <div id="primary" class="a b c d e f g h i j k">color</div>
  ```
  ```css
  #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`
  ```htmlembedded
  <div>color</div>
  ```
  ```css
  * 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
:::