CSS 選擇器使用

CSS 選擇器的使用操作

選擇器	例子	例子描述	CSS
. class	.intro	選擇class="intro" 的所有元素。	1
# id	#firstname	選擇id="firstname" 的所有元素。	1
*	*	選擇所有元素。	2
element	p	選擇所有<p> 元素。	1
element加上class	div.classname	選擇所有有著class="classname"的<div> 元素。	1
element , element	div,p	選擇所有<div> 元素和所有<p> 元素。	1
element element	div p	選擇<div> 元素內部的所有<p> 元素。	1
element > element	div>p	選擇父元素為<div> 元素的所有<p> 元素。	2
element + element	div+p	選擇緊接在<div> 元素之後的同層<p> 元素。<br>也算一個+br，例div +br +p 。	2
[ attribute ]	[class]/ div[class]	選擇帶有class屬性所有（/div）元素。	2
[ attribute ="value"]	[class="a01"]/ div[class="a01"]	（div）元素有 class 屬性且值等於 "a01"	2
[ attribute ~="value"]	[title~="bar"]	元素有 title 屬性，可利用空白字元區隔指定多項屬性值，其中一個包含屬性值 "bar"。	2
[ attribute |="value"]	[class|="en"]	選擇class 屬性值必須是"en"以及含有連字號的第一屬性值，連字號前面的字串也是"en"的所有元素。例如，class="en", class="en-egg egg"	2
:link	a:link	選擇所有未被訪問的鏈接。	1
:visited	a:visited	選擇所有已被訪問的鏈接。	1
:active	a:active	選擇活動鏈接。	1
:hover	a:hover	選擇鼠標指針位於其上的鏈接。	1
:focus	input:focus	選擇獲得焦點的input 元素。	2
::first-letter	p::first-letter	選擇每個<p> 元素的首字母。	1
::first-line	p::first-line	選擇每個<p> 元素的首行。	1
:first-child	p:first-child	選擇屬於父元素的第一個子元素的每個 <p> 元素。	2
::before	p::before	在每個<p> 元素的內容之前插入內容。	2
::after	p::after { content: "後方產生的內容"; color: blue; }	在每個<p> 元素的內容之後插入內容。	2
:lang( language )	p:lang(it)	選擇帶有以"it" 開頭的lang 屬性值的每個<p> 元素。	2
element1 ~ element2	p~ul	<p>後面的所有同層 的每個<ul> 元素。	3
[ attribute ^= value ]	a[src^="https"]	選擇其src 屬性值以"https" 為開頭字串的每個<a> 元素。	3
[ attribute $= value ]	a[src$=".pdf"]	選擇其src 屬性值以".pdf"為 結尾字串的所有<a> 元素。	3
[ attribute *= value ]	a[src*="abc"]	選擇其src 屬性的所有值中有包含"abc" 字串的每個<a> 元素。	3
:first-of-type	p:first-of-type	選擇屬於其父元素的首個< p> 元素的每個<p> 元素。	3
:last-of-type	p:last-of-type	選擇屬於其父元素的最後< p> 元素的每個<p> 元素。	3
:only-of-type	p:only-of-type	選擇屬於其父元素唯一的< p> 元素的每個<p> 元素。	3
:only-child	p:only-child	選擇屬於其父元素的唯一子元素的每個 <p> 元素。	3
:nth-child( n )	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每 個<p> 元素。	3
:nth-last-child( n )	p:nth-last-child(2)	同上，從最後一個子元素開始計數。	3
:nth-of-type( n )	p:nth-of-type(2)	選 擇屬於其父元素第二個<p> 元素的每個<p> 元素。1,2,3,4。odd（奇數）或 even（偶數）。公式(an+b)，a 表示周期的大小，n 是計數器（從 0 開始），例3n+1（間隔3個元素套用，1,4,7...），3n+2。公式(-n+3)，則只有3,2,1這前三個。	3
:nth-last-of-type( n )	p:nth-last-of-type(2)	同上，但是從最後一個子元素開始計 數。	3
:last-child	p:last-child	選擇屬於其父元素最後一個子元素每個 <p> 元素。	3
:root	:root	選擇文檔的根元素。	3
:empty	p:empty	選擇沒有子元素的每個< p> 元素（包括文本節點）。	3
:target	#news:target	選擇當前活動的#news 元素。	3
:enabled	input:enabled	選擇每個啟用的< input> 元素。	3
:disabled	input:disabled	選擇每個禁用的< input> 元素	3
:checked	input:checked	選擇每個被選中的< input> 元素。	3
:not( selector )	:not(p)	選擇非<p> 元素的每個元素。	3
::selection	::selection	選擇被用戶選取的元素部分。	3

請參考資料來源