CSS詳解：特性、選擇器與優先級
目錄
- CSS詳解：特性、選擇器與優先級
- 一、CSS的核心特性
- 1. 層疊性（Cascading）
- 2. 繼承性（Inheritance）
- 3. 優先級（Specificity）
- 4. 響應式設計
- 5. 動畫與過渡
- 二、CSS選擇器詳解
- 1. 基本選擇器
- 2. 組合選擇器
- 3. 屬性選擇器
- 4. 偽類選擇器
- 5. 偽元素選擇器
- 三、CSS優先級（Specificity）詳解
- 1. 優先級計算規則
- 例子
- 2. !important的作用
- 3. 層疊順序
- 四、實戰示例
- 五、總結
CSS（Cascading Style Sheets，層疊樣式表）是前端開發中不可或缺的技術之一。它負責網頁的外觀和布局，與HTML結構和JavaScript行為共同構建了現代網頁。本文將詳細介紹CSS的核心特性、選擇器的種類及其優先級（Specificity），幫助你更好地理解和運用CSS。
一、CSS的核心特性
1. 層疊性（Cascading）
CSS的“層疊”指的是當多個樣式規則作用于同一元素時，瀏覽器會根據一定的規則決定最終應用哪一條樣式。這些規則包括樣式來源（如瀏覽器默認樣式、外部樣式表、內聯樣式等）、選擇器優先級和聲明順序。
2. 繼承性（Inheritance）
某些CSS屬性會從父元素繼承到子元素。例如，color、font-family等文本相關屬性會自動傳遞給子元素，而margin、padding等布局屬性則不會繼承。可以通過inherit、initial、unset等關鍵字手動控制繼承行為。
3. 優先級（Specificity）
當多個規則作用于同一元素時，優先級決定了哪條規則生效。優先級由選擇器的類型和數量決定，后文將詳細介紹。
4. 響應式設計
CSS支持媒體查詢（Media Queries），可以根據不同的設備和屏幕尺寸應用不同的樣式，實現響應式布局。
5. 動畫與過渡
CSS3引入了動畫（@keyframes）和過渡（transition）屬性，使網頁交互更加豐富和流暢。
二、CSS選擇器詳解
選擇器用于選中HTML文檔中的元素，以便為其應用樣式。選擇器的種類豐富，靈活組合可以實現復雜的樣式控制。
1. 基本選擇器
- 元素選擇器：選中所有指定標簽的元素
p { color: blue; } - 類選擇器：選中所有帶有指定class的元素
.highlight { background: yellow; } - ID選擇器：選中指定id的元素（頁面唯一）
#header { font-size: 2em; } - 通配符選擇器：選中所有元素
* { box-sizing: border-box; }
2. 組合選擇器
- 后代選擇器：選中某元素內部的所有指定后代元素
.nav a { color: red; } - 子元素選擇器：只選中直接子元素
ul > li { list-style: none; } - 相鄰兄弟選擇器：選中緊跟在某元素后的指定元素
h2 + p { margin-top: 0; } - 通用兄弟選擇器：選中同級后面所有指定元素
h2 ~ p { color: gray; }
3. 屬性選擇器
- 存在屬性
input[required] { border: 1px solid red; } - 屬性值等于
a[target="_blank"] { color: orange; } - 屬性值包含
[class~="btn"] { padding: 10px; } - 屬性值以某字符串開頭/結尾/包含
a[href^="https"] { color: green; } a[href$=".pdf"] { color: red; } a[href*="example"] { font-weight: bold; }
4. 偽類選擇器
- 結構偽類
li:first-child { font-weight: bold; } li:last-child { color: blue; } li:nth-child(2n) { background: #eee; } - 狀態偽類
a:hover { text-decoration: underline; } input:focus { border-color: blue; }
5. 偽元素選擇器
- 常用偽元素
p::first-line { font-size: 1.2em; } p::first-letter { color: red; } div::before { content: "★"; } div::after { content: "☆"; }
三、CSS優先級（Specificity）詳解
當多個選擇器選中同一元素并設置了相同的屬性時，瀏覽器會根據優先級規則決定最終應用哪一條樣式。
1. 優先級計算規則
優先級由四個部分組成，通常用(a, b, c, d)表示：
a：內聯樣式（如style="..."），有最高優先級b：ID選擇器的數量c：類選擇器、屬性選擇器、偽類的數量d：元素選擇器、偽元素的數量
優先級比較時，從左到右依次比較，遇到高的就確定勝負。
例子
| 選擇器 | 優先級 |
|---|---|
#header | (0,1,0,0) |
.nav .item | (0,0,2,0) |
ul li a | (0,0,0,3) |
a:hover | (0,0,1,1) |
style="color:red" | (1,0,0,0) |
2. !important的作用
!important可以提升某條樣式的優先級，使其覆蓋其他規則。但應謹慎使用，避免維護困難。
p { color: blue !important; }
3. 層疊順序
當優先級相同時，后寫的規則會覆蓋前面的規則。
四、實戰示例
<!DOCTYPE html>
<html>
<head><style>p { color: black; } /* (0,0,0,1) */.highlight { color: orange; } /* (0,0,1,0) */#main { color: green; } /* (0,1,0,0) */p.highlight { color: blue; } /* (0,0,1,1) */p { color: red !important; } /* (0,0,0,1) + !important */</style>
</head>
<body><p id="main" class="highlight">Hello CSS!</p>
</body>
</html>
分析：
p：color: black.highlight：color: orange#main：color: greenp.highlight：color: bluep：color: red !important
最終顯示為紅色，因為!important提升了優先級。
五、總結
- CSS的特性包括層疊、繼承、優先級、響應式、動畫等。
- 選擇器種類豐富，合理組合可以精準選中目標元素。
- 優先級決定了樣式的最終應用，理解其計算規則有助于解決樣式沖突。
- !important應謹慎使用，優先考慮優化選擇器結構。
》閱讀筆記：p86-p90)
)
