在 CSS 中你可以制定你想要的樣式，想像 CSS 是一套規則，告訴電腦網頁上的文字和圖片應該如何展示：顏色是什麼、大小如何，以及它們在頁面上的位置。
CSS 層疊和優先級概念
在 CSS 中，當多條規則針對相同的元素時，層疊和優先級決定了哪些規則將被應用。這是通過比較以下幾個因素來實現的：
- 重要性（Importance）：
!important標記的規則優先級最高。 - 具體性（Specificity）：具體性高的選擇器（如ID選擇器）將覆蓋具體性低的選擇器（如元素選擇器）。
- 源順序（Source Order）：在具有相同重要性和具體性的規則中，後出現的規則將覆蓋先前的規則。
CSS優先級示例
讓我們通過一些例子來逐步解釋這些概念：
範例1：基本具體性( HTHM tag 和 Class Name )
基本具體性常見的有兩種，分為【元素選擇器】與【類選擇器】，也就是最基本的 HTML tag 與 Class Name
/* 元素選擇器(HTHM tag)：具體性為 (0,0,0,1) */
h1 {
color: red;
}
/* 類選擇器(Class Name)：具體性為 (0,0,1,0) */
.highlight {
color: blue;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>歡迎來到我的網站</h1>
<h1 class="highlight">這是一個 CSS highlight</h1>
</body>
</html>如果<h1>元素同時有.highlight類，文字顏色將是藍色，因為類選擇器的具體性高於元素選擇器。
範例2：複合具體性
複合具體性，其實主要是在講除了基本具體之外，加入 ID 或兩個基本一起使用的情況，如下：
/* ID 選擇器：具體性為 (0,1,0,0) */
#main-title {
color: green;
}
/* 類選擇器+元素選擇器：具體性為 (0,0,1,1) */
h1.highlight {
color: blue;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="highlight">這是一個 CSS h1 + highlight</h1>
<h1 id="main-title" class="highlight">這是一個 CSS highlight + ID main-title</h1>
</body>
</html>如果<h1>元素同時有id="main-title"和class="highlight"，文字顏色將是綠色，因為ID選擇器的具體性高於類選擇器和元素選擇器的組合。
範例3：重要性覆蓋具體性
重要性覆蓋具體性，白話一點講解是說 CSS 樣式可以指定 !important ，一旦設定後將視為最高的優先級，其他選擇器的相同樣式將無效，會以 !important 為主，如下：
/* 類選擇器：具體性為 (0,0,1,0) */
.highlight {
color: blue !important;
}
/* ID選擇器：具體性為 (0,1,0,0) */
#main-title {
color: green;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="highlight">這是一個 CSS highlight</h1>
<h1 id="main-title" >這是一個 CSS ID main-title</h1>
<h1 id="main-title" class="highlight">這是一個 CSS highlight !important + ID main-title</h1>
</body>
</html>即使ID選擇器的具體性高於類選擇器，使用!important的藍色仍然優先。
範例4：同等具體性下的源順序
簡單可以理解，在使用相同選擇器的情況下，後面的規則會覆蓋掉前面的規則，如下：
/* 第一條規則 */
.highlight {
color: blue;
}
/* 第二條規則 */
.highlight {
color: green;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>歡迎來到我的網站</h1>
<h1 class="highlight">這是一個 CSS highlight</h1>
</body>
</html>如果.highlight類的元素存在兩條具有相同具體性的規則，則後定義的規則（綠色）將被應用。
結論
通過上述從簡單到複雜的例子，我們可以看到CSS層疊和優先級是如何影響樣式應用的。理解這些原則對於有效地使用CSS來定制網頁外觀至關重要。
記住，良好的 CSS 要避免過度依賴!important，並儘量保持選擇器的簡潔，這樣不僅能提高樣式表的可讀性，也能使維護變得更容易。
發表迴響