CSS 串接樣式表語法小抄

CSS (Cascading Style Sheet) 是 W3C 發布並維護的建議書, 其版本前後有 CSS1, CSS2, CSS3 三種, 不僅是前端網頁排版與呈現的主角, 也是撰寫網頁爬蟲時定位目標資料的重要工具, 故將其選擇器語法整理如下表, 詳細測試範例參考 :

# 網頁技術速學筆記 (二) : CSS 基礎

1. CSS Level 1 選擇器 (1996 年發布) : 

CSS1 選擇器	範例	說明
#id	#ok	選取 id 屬性值為 ok 之全部元素
.class	.food	選取 class 屬性值為 food 之全部元素
tag	p	選取所有指定標籤之元素
tag1, tag2	div, p	選取全部 div 與 p 元素
tag1 tag2	div p	選取全部是 div 後代之 p 元素
a:link	a:link	選取全部尚未拜訪過的超連結
a:visited	a:visited	選取全部已經拜訪過的超連結
a:active	a:active	選取全部可點選的超連結
a:hover	a:hover	選取全部滑鼠游標正在上面的超連結
:first-letter	p:first-letter	選取 p 元素內容的第一個字母
:first-line	p:first-line	選取 p 元素內容的第一行

2. CSS Level 2 選擇器 (1998 年發布) : 

CSS2 是 CSS1 的超集 (superset, 即 CSS2 包含了 CSS1 語法), 新功能主要提供了元素的絕對, 相對, 固定定址語法以及 z-index. 

CSS2 選擇器	範例	說明
*	*	選取全部元素 (全域選擇器)
tag1 > tag2	div > p	選取 div 元素之子孫元素中的全部 p 元素
tag1 + tag2	div + p	選取 div 元素後面之兄弟元素中的全部 p 元素
[attribute]	[name]	選取全部具有 name 屬性之元素
[attribute=value]	[name=food]	選取全部 name 屬性值為 food 之元素
[attribute~=value]	[name~=food]	選取全部 name 屬性值包含 food 之元素
[attribute|=value]	[name|=food]	選取全部 name 屬性值以 food 開頭之元素
:first-child	p:first-child	選取是第一個子元素的全部 p 元素
:focus	input:focus	選取取得焦點的 input 元素
:before	p:before	在 p 元素之前插入偽元素
:after	p:after	在 p 元素之後插入偽元素
:lang(value)	p:lang(zh)	選取 lang 屬性值是 zh (繁中) 之全部 p 元素

3. CSS Level 3 選擇器 (1999 年發布) : 

CSS3 選擇器	範例	說明
tag1 ~ tag2	div ~ p	選取前 (兄弟) 元素是 div 的全部 p 元素
[attribute^=value]	a[href^="http"]	選取 href 屬性值以 http 開頭的全部 a 元素
[attribute$=value]	a[href$="php"]	選取 href 屬性值以 php 結尾的全部 a 元素
[attribute*=value]	a[href*="msn"]	選取 href 屬性值包含 msn 的全部 a 元素
:last-child	p:last-child	選取是最後一個子元素的全部 p 元素
:nth-child(n)	p:nth-child(3)	選取是第 3 個子元素的全部 p 元素
:nth-last-child(n)	p:nth-last-child(3)	選取是倒數第 3 個子元素的全部 p 元素
:only-child	p:only-child	選取是唯一子元素的全部 p 元素
:first-of-type	p:first-of-type	選取是第 1 個子元素的全部 p 元素
:last-of-type	p:last-of-type	選取是最後一個子元素的全部 p 元素
:nth-of-type(n)	p:nth-of-type(3)	選取是第 3 個子元素的全部 p 元素
:nth-last-of-type(n)	p:nth-last-of-type(3)	選取是倒數第 3 個子元素的全部 p 元素
:enabled	button:enabled	選取所有可使用之 button 元素
:disabled	button:disabled	選取所有不可使用之 button 元素
:checked	input:checked	選取所有被勾選之 input 元素
:not(selector)	:not(div)	選取所有不是 div 的元素
:root	:root	選取 HTML 網頁之根元素
:empty	p:empty	選取沒有子元素之全部 p 元素

 

參考 :

# https://developer.mozilla.org/zh-TW/docs/Web/CSS