ARCHIVE　／　2013/02/06

[CSS] Selector Type

因應近期套版工作所需，記錄一下幾種特別的選擇器用法。

[通用選取項(Universal Selector)]

p * { color: red; } /* p 元素後的子元素的文字都為紅色 */

[比鄰選取項(Adjacent Selector)]

h1+p { margin-top: 1em; } /* 緊鄰 h1 元素的 p 元素，上邊界距離為 1 倍文字高 */

[擬元素選取項(Pseudo-element Selector)]

Selector	Example	Example description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
:first-letter	p:first-letter	Selects the first letter of every <p> element
:first-line	p:first-line	Selects the first line of every <p> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:before	p:before	Insert content before every <p> element
:after	p:after	Insert content after every <p> element
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"

Reference: