今天要介紹的主題是CSS選擇器，我們可以透過基本的CSS選擇器去指定要處理的DOM元素，像是指定標籤(div,span,body…)、ID(#header)、Class(.post)等。
常見CSS選擇器：
1. ID (#id)
2. Class (.class)
3. Type (即HTML標籤,如div)
4. 鄰接選擇器 (如: h2+p，僅作用於鄰接h2的p元素)
5. Child (如: li>ul)
6. Descendant (如:ul a)
7. Universal (*)
8. 屬性 (如: [type=”text”])
9. 摸擬類別/元素 (如: a:hover)
- 基本選擇器
- 複合選擇器（CSS Combinators）
基本選擇器範例1：
| 選擇器 | 例子 | 說明 |
|---|---|---|
| element[attribute] | a[title] or img[alt] | 選擇 a 帶有 title 屬性的所有元素 或者 img 帶有 alt 屬性的所有元素 |
| element[attribute=value] | a[target=_blank] | 選擇 a 元素的 target 帶有 _blank 的值的所有元素 |
| element[attribute~=value] | img[title~=test] | 選擇 img 元素的 title 有 ‘test’ 的所有元素 |
| element[attribute|=value] | [lang|=tw] | 選擇所有 lang 屬性以 tw 開頭的元素 |
| element[attribute^=value] | a[scr^=”http”] or a[href^=#] | 選擇 a 的 scr 屬性以 http 開頭的元素 或者 a 的 href 屬性以 # 開頭的元素 |
| element[attribute$=value] | a[src$=”.png”] | 選擇 a 的 src 屬性以 ‘.png’ 結尾的元素 |
| element[attribute*=value] | a[class*=”cat”] | 選擇 a 的 class 屬性有 ‘cat’ 字串的元素 |
除了使用 ~= 也可以使用 *= ，參考看看範例：
https://www.w3schools.com/CSS/css_attribute_selectors.asp
複合選擇器範例：
https://www.w3schools.com/css/css_combinators.asp
似乎只有辦法取得「下一個sibling」或「之後的sibling」，沒有辦法拿到「之前的sibling」：
Is there a “previous sibling” selector?
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector