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選擇器優先級 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

->> Reference link

MDN中文文檔 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSSSelectors

MDN 英文文檔 https://developer.mozilla.org/en-US/docs/Web/CSS/CSSSelectors

菜鳥教程 https://www.runoob.com/cs-s-ref/css-selectors.html

CodingStartUp https://www.bilibili.com/video/BV1et411K7RU

->> 文檔版本&更新記錄

現在版本為V1.0, 下一版預計加入"CSS支援版本"和"常用度"兩列,增加Demos,并将Experimental,Tag,"->>"改為圖示.

詳見 Github