---
tags: CSS, 六角筆記王
title: CSS - 選擇器與權重
---

# CSS 選擇器與權重
## 基本選擇器
CSS 優先順序為由上到下，若有相同則看權重。

/* 通用選擇，權重 0 */ 
* {
  color: white;
}

/* 標籤元素選擇，權重 1 */ 
ul {
  color: white;
}

/* class 選擇，權重 10 */ 
.main {
  color: blue;
}

/* 屬性選擇，權重 10  */ 
[type='button'] {
  color: red;
}

/* 狀態選擇，權重 10 */ 
a:hover {
  color: grey;
}

/* id 選擇，權重 100 */ 
#main {
  color: red;
}

/* inline style，權重 1000
 * <div style="color: red;">
 */


/* !important，權重 10000 */
.pt-5 {
  padding-top: 4rem !important ;
}

## 複合選擇器

/* 相鄰選擇器，不包含自己，選取相鄰元素 */ 
li + li {
  color:red;
}

/* 連號選擇器，不包含自己，選取同層指定的元素，會跳過未指定的元素 */
h2 ~ p {
 color: red;
}


/* 選擇第一個子元素 */ 
ul > li {
 color: red;
}

/* 後代選擇，ul 內所有 p 標籤 */ 
ul p {
  color:blue;
}

## 參考來源
> 1. [MDN - CSS 選擇器](https://developer.mozilla.org/zh-TW/docs/Glossary/CSS_Selector)
> 2. [小艾 ( iris ) - Day20：小事之 CSS 權重 (css specificity)](https://ithelp.ithome.com.tw/articles/10196454)
> 3. [CSScoke - 親代選取器之妹妹選取器與鞭炮串選取器](https://ithelp.ithome.com.tw/articles/10220656)