第二章：選擇器（3）

第 11 屆 iThome 鐵人賽

DAY 5

Modern Web

CSS大全閱讀筆記系列第 5 篇

11th鐵人賽

Camellus

2019-09-21 23:51:36

787 瀏覽

分享至

利用文件結構的選擇器：
a. 親子關係：
- CSS主要建立在文件的親子關係上。
- HTML文件是以元素的架構為基礎，可視為文件的樹狀圖（依照排縮分層，<html>是第一層，<head>和<body>，為同一層，是第二層，以下類推。）。
- 樹狀結構中，兩個元素若只相差一層，則上層為親代元素，下層為子代元素，若兩個元素相差超過兩層，則為祖先與後裔的關係，而非親子關係。
b. 後裔選擇器（脈絡選擇器）：
- 寫法：h1 em {......}，由多個空白分隔的選擇器組成。
- 選擇器之間的空白是結合子，有是⋯⋯一部份的意思，但閱讀時，須由右往左讀，例如h1 em，應讀為所有em同時是h1的一部份，而非所有<h1>中包含<em>的元素。
- 後裔選擇器沒有遠近的觀念，當權重相同時，後寫者會覆蓋先寫者。
c. （直接）子代選擇器：
- h1 > span {......}
- 選擇器間加上子代結合子（半形大於符號，>），結合子間的空白不影響結果。
- 由右往左讀，例中h1 > span讀作選所有<span>元素中屬於<h1>直接子代的元素。
- 只能影響直接子代，就算是直接後裔元素，也不在改變範圍中。
d. 選擇相鄰的兄弟元素：
- 選擇目標 + 選擇目標後的緊鄰兄弟元素 {......}，例：h2 + p {......}
- 選擇器間以緊鄰兄弟連結子（半形加號符號，+），結合子間的空白不影響結果。
- 選擇與選擇目標有相同親代，且緊鄰選擇目標的下一個元素，例h2 + p，意思是選擇與h2有相同親代，且緊鄰<h2>的下一個<p>元素。
- 如果兩個元素之間，有出現未被任何元素標記包住的純文字，因為純文字部分不屬於任何元素，因此會被略過，選擇純文字後的元素。
e. 選擇後續的兄弟：
- 寫法：選擇目標 ~ 選擇目標後的兄弟元素 {......}，例：h2 ~ ol {......}
- 選擇器間以一般兄弟連結子（半形~符號），結合子間的空白不影響結果。
- 選擇範圍是選擇目標後與選擇目標擁有相同親代的後續元素。
- 被選擇兄弟元素不必相鄰，只要有相同親代就可被選擇。