2021年2月24日 星期三

CSS 串接樣式表語法小抄

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 元素
 

參考 :


沒有留言 :