---
tags: CSS
---
# CSS 權重命題

| 類別名稱| 權重分數 |
| -------- | -------- |
| Element | 1分 |
| Class、偽類、屬性選擇器 | 10分 |
| ID | 100分 |
| inline style | 1,000分 |
| !important | 10,000分 |

若權重分數相同，則看程式碼的先後順序，後>前。

### 第一題
請問以下的 HTML 裡面的 h1 是什麼顏色？

<h1 class="title1 title2">標題</h1>

<!--  CSS -->
h1{
 color:blue;
}
#title1{
 color: red;
}
#title2{
 color: black
}

:::spoiler Ans:
<font color="#f00">藍色，因為#開頭的為id選擇器。</font>

:::

### 第二題
請問以下的 HTML 裡面的 h1 是什麼顏色？

<h1 class="title1 title2">標題</h1>

<!--  CSS -->
.title2{
 color: black
}
.title1{
 color: red;
}

:::spoiler Ans:
<font color="#f00">紅色，因為當權重分數一樣時，寫在後面的程式碼會覆蓋前面的。</font>

:::

### 第三題
請問以下的 HTML 裡面的 h1 是什麼顏色？

<h1 class="title1 title2" style="color:red;">標題</h1>

<!--  CSS -->
.title1{
 color: red;
}
.title2{
 color: black
}

:::spoiler Ans:
<font color="#f00">紅色，因為行內樣式權重大於選擇器。</font>

:::