撰寫CSS選擇器(CSS Selector)

今天要介紹的主題是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)



基本選擇器範例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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *