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