flight.Archives001 / CSS Selectors選擇器
Title/CSS選擇器
序 : 這是flight.Archives 夢開始的地方, 作者我熬夜肝出來了這篇文章… 保證這是最簡潔高效的 CSS Selectors 教程
Note : 暫時沒有能夠選擇 父元素、父元素的同級元素，或 父元素的同級元素的子元素 的選擇器或者組合器
Tag/基本選擇器 (Basic selectors)
| 選擇器 | 語法 | 作用 |
|---|---|---|
| 通用選擇器(Universal selector) | * | 選擇所有元素 |
| 元素選擇器(Type selector) | elementname | 選擇所有 |
| 類選擇器(Class selector) | .classname | 選擇所有 class 屬性中含有 “classname” 的元素 |
| ID 選擇器(ID selector) | #idname | 選擇所有 id=”idname” 的元素 |
| 屬性選擇器(Attribute selector) | [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] |
[attr]選擇所有帶有attr屬性的元素[attr=value]選擇 attr 屬性值為 value 的元素[attr~=value]選擇 attr 屬性值包含以空格分隔的 value 的元素[attr|=value]選擇 attr 屬性值以 value 或 value- 為前綴(“-“為連字符，Unicode 編碼為 U+002D)開頭典型的應用場景是用來匹配語言簡寫代碼(如 zh-CN，zh-TW 可以用 zh 作為 value)[attr^=value]選擇 attr 屬性值以 value 開頭的元素[attr$=value]選擇 attr 屬性值以 value 結尾的元素[attr*=value]選擇 attr 屬性值包含 value 的元素[attr operator value i]在屬性選擇器的右方括號前添加一個用空格隔開的字母 i(或 I)，可以在匹配屬性值時忽略大小寫(支持 ASCII 字符範圍之內的字母)[attr operator value s](Experimental實驗性功能)在屬性選擇器的右方括號前添加一個用空格隔開的字母 s(或 S)，可以在匹配屬性值時區分大小寫(支持 ASCII 字符範圍之內的字母) |
Tag/分組選擇器 (Grouping selectors)
| 選擇器 | 語法 | 作用 |
|---|---|---|
| 選擇器列表(Selector list) | SelectorA, SelectorB | 同時選擇SelectorA和SelectorB選中的內容 |
Tag/組合器 (Combinators)
| 選擇器 | 語法 | 作用 |
|---|---|---|
| 後代組合器(Descendant combinator) | SelectorA SelectorB(兩者間空格) | 選擇SelectorA選中元素的所有後代節點 |
| 直接子代組合器(Child combinator) | SelectorA > SelectorB | 選擇SelectorA選中元素的直接子代的節點 |
| 一般兄弟組合器(General sibling combinator) | SelectorA ~ SelectorB | 選擇SelectorA選中元素之後的兄弟元素 |
| 緊鄰兄弟組合器(Adjacent sibling combinator) | SelectorA + SelectorB | 選擇SelectorA選中元素緊隨其後的兄弟元素 |
| 列組合器(Column combinator)(Experimental實驗性功能) | SelectorA || SelectorB | 選擇SelectorA選中列元素中的元素 |
Tag/偽選擇器(Pseudo)
| 選擇器 | 語法 | 作用 |
|---|---|---|
| 偽類(Pseudo classes) | :status | 選擇所有狀態與給定 status 相同的元素 |
| 偽元素(Pseudo elements) | ::Pseudo_elements | 選擇元素的指定偽元素 |
->> Demos
詳見MDN,Codepen
->> See also
CSS選擇器優先級 //developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
->> Reference link
MDN中文文檔 //developer.mozilla.org/zh-CN/docs/Web/CSS/CSSSelectors
MDN 英文文檔 //developer.mozilla.org/en-US/docs/Web/CSS/CSSSelectors
菜鳥教程 //www.runoob.com/cssref/css-selectors.html
CodingStartUp //www.bilibili.com/video/BV1et411K7RU
->> 文檔版本&更新記錄
現在版本為V1.0, 下一版預計加入”CSS支持版本”和”常用度”兩列,增加Demos,並將Experimental,Tag,”->>”改為圖標.
詳見 Github
