4-1 選取器介紹 ( Selector )

屬性說明，詳：w3schools(英) / runoob(中)

使用CSS原則

標籤選取器

常用項目列表

選取器	範例	說明	CSS3
.class	.intro	選取所有 class="intro" 的類別命名的元素
#id	#firstname	選取所有 id="firstname" 的id命名的元素
*	*	選取所有元素
element	p	選取<p>元素
element , element	div,p	多種選取元素相同美化時，以【,】區隔
element element	div p	選擇<div>階層之下的同一所有元素<p>進行美化
element > element	div>p	父層<div>階層之下子元素<p>進行美化
element + element	div + p	緊臨父層<div>階層之下第一個子元素<p>進行美化

簡述說明

選取器	說明
A   B	A之下包含B項目設定
A , B	A 或者 B 相同屬性設定
A > B	選取A下一層的B元素
A ~ B	選取與 A 同父層的 B 元素
A + B	選取與 A 相鄰的 B 元素 ( 中間不能被任何元素相隔 )

虛擬類別選取器

選取器	範例	說明	CSS3
:link	a:link	超連結未被點選連結
:visited	a:visited	超連結已被點選連結
:hover	a:hover	滑鼠靠在上方CSS設定情形
:active	a:active	滑鼠點選未放開(產生焦點)時CSS設定情形
:focus	a:focus	滑鼠點選(產生焦點)時CSS設定情形
:target	#news:target	滑鼠點選當前活動的#news元素時CSS設定情形 （包含該錨名稱的點擊的URL）	V

偽元素選取器

選取器	範例	說明	CSS3
::before	p::before	新增該元素之 前/後 的 容器 元素 其內必定加入 content:"" 屬性 其為 inline 行內元素
::after	p::after
:first-child	p:first-child	父元素之下， 選取 第一個 / 最後一個 子元素	V
:last-child	p:last-child
:nth-child (n)	p:nth-child (2)	父元素之下有多個不同元素， 選取 第n個 / 倒數第n個 子元素	V
:nth-last-child (n)	p:nth-last-child (n)
:nth-of-type (n)	p:nth-of-type (2)	父元素之下有多個不同元素， 只選取同一元素的 第n個 / 倒數第n個 子元素	V
:nth-last-of-type (n)	p:nth-last-of-type(2)
:nth-child (2n)	p:nth-child (2n)	父元素之下，選取 偶數 子元素	V
:nth-child (2n+1)	p:nth-child (2n+1)	父元素之下，選取 奇數 子元素	V
:nth-child (-n+5)	p:nth-child (-n+5)	父元素之下，選取 前幾(5)項 子元素	V
:nth-child (n+5)	p:nth-last-child (-n+5)	父元素之下，選取 後幾(5)項 子元素	V