CSS3 選取器

紀錄一下CSS選取器。

圖片來源Designed by Freepik

---

CSS3 選取器

e   d：後代選擇器(Descendant selector)若元素為d，且為【元素e的子元素或子孫元素】，則套用樣式

e > c：子元素選擇器(Child selector)若元素c為【元素e的子元素】，則套用樣式

e1 + e2：相鄰元素選擇器(Adjacent sibling selector)若元素為e2，且前面有e1元素，則套用樣式（跟屁蟲選擇器）

e[att]：屬性選擇器(Simple attribute selector)當元素為e，且具有att屬性，則套用樣式

e[att="val"]：準確屬性選擇器(Exact attribute value selector)當元素為e，並具有att屬性，且att屬性的值為val時，則套用樣式

e[att~="val"]：當元素的屬性值，可用空白隔開時設定多個值時，若其中有一個值為val，則套用樣式

e[att^="val"]：當元素e具att屬性，且其值以val開頭，則套用樣式

e[att$="val"]：當元素e具att屬性，且其值以val結尾，則套用樣式

e[att*="val"]：當元素e具att屬性，且其值含有子字串val，則套用樣式

e[att|="val"]：特定屬性選擇器(Particular attribute selector)當元素為e，並具有att屬性，且att屬性的值為val、val-或以val-開頭時，則套用樣式