在昨天的文章中，我們學會了如何用CSS來調整網頁的顏色與字體，但隨著網頁越來越複雜，你很快就會遇到一個大問題，如果我同時對同一個標籤下了不同的顏色指令，瀏覽器到底該聽誰的？
例如，如果在程式碼中，我對某個段落同時說了「你要變紅色」又說了「你要變藍色」，這種樣式起衝突的情況，在前端開發中被稱為樣式衝突。而瀏覽器有一套非常嚴謹的邏輯來決定誰是贏家，這套邏輯就叫做CSS優先順序（Specificity，又稱權重）。
瀏覽器在判斷誰的指令優先時，會依據「選擇器的類型」來計算分數，分數越高的人，它的樣式就會覆蓋掉分數低的人，我們可以把這個規則簡化為好幾個階層：
!important（最高）：這不是選擇器，而是寫在屬性值後面的特殊關鍵字，只要加上它，分數就會直接飆到最高，強行壓過其他任何跟他有衝突的指令，但因為它太過霸道，在工程實務上建議盡量少用，以免破壞整體的維護性。style="..."，它的分數非常高，能夠直接壓過寫在標頭區或外部檔案的所有樣式。#id）：在HTML中，ID具有唯一性，就像身份證字號，因此在CSS中，ID選擇器的分數也非常高。.class）：這是網頁中最常拿來重複套用樣式的選擇器，分數屬於中階。h1、p）：直接針對HTML標籤名稱下樣式，因為範圍最廣、最不精準，所以分數最低。如果今天兩個選擇器的「等級完全一模一樣」（例如都是標籤選擇器，或者都是同一個Class），瀏覽器就會啟動第二套邏輯：後寫的贏，因為CSS是從上到下一行一行讀取的，後面的指令會把前面的指令覆蓋掉。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Day11 CSS 優先順序範例</title>
<style>
p {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
</style>
</head>
<body>
<p class="blue">我是什麼顏色？</p>
<p class="blue green">那我又是什麼顏色？</p>
<p class="green" style="color: orange;">我被行內樣式綁架了！</p>
</body>
</html>
了解了CSS的優先順序，是邁向專業網頁開發者的必經之路，以後當你發現網頁的顏色怎麼改都沒有反應時，先不要緊張，這代表你的樣式可能正在跟別的顏色「打架」，而且你現在寫的分數可能輸給了其他地方。
明天我們將回到網頁空間的控制，去介紹排版世界中至關重要的第一個幾何觀念：盒子模型（Box Model），學習如何控制元件的外框與邊距，各位我們明天見。
iThome鐵人賽
看影片追技術