CSS3與濾境(1)-套用規則

CSS3是目前仍然在發展中的語言,所以這一系列的文章可能會不定期的修改(如果我發現異動的話)。老實說,這真是一件麻煩的事情,我比較傾向於等它都ok了再來寫;但是我仍然決定寫了,這是為什麼呢?看看這次系列的標題,叫「CSS3與濾境」這就是最大的原因了。在CSS一代的時候,微軟的IE系列就有推出屬於他們的CSS濾境語法,別家的瀏覽器都看不到,只有用IE才能看見絢麗的效果(例如透明、陰影等)。現在的CSS3就是增加了這些濾境,而且有更多的功能和效果。然而,雖然CSS3有濾境的語法,但是IE 8以前的瀏覽器卻不支援,只支援自己的濾境語法(就是愛跟別人唱反調)。所以如果我們要寫出所有瀏覽器都支援的濾境語法,就必需兩種語法都寫。雖然它們是不同時期推出的語法,但是有一些功能是相同的,所以我把它們寫在一起,要用的時候就一起用。

在使用CSS3語法的時候,要特別注意瀏覽器的支援問題。也許是因為它目前還在開發中,所以各家瀏覽器支援的方式並不統一。為了減少不同瀏覽器產生的錯誤,請記得在每個網頁中加入 DOCTYPE 宣告(詳情請參考XHTML架構與準則)。

前面的「CSS排版程式(2)-套用規則」中有介紹了CSS基本的套用方式,而在CSS3裡則推出更多更彈性的套用方法讓程式設計師使用。如果不想用這些新方法,使用舊的語法仍然是可以執行的。以下直接使用範例做介紹。

套用到標籤

/* 當 ul 標籤和 p 有相同的父母時,把 ul 標籤裡的文字變成綠色 */
p~ul { color:green; }
/* 系統會由上而下先檢查到 p 標籤,再檢查下面出現的 ul 標籤,如果父母和 p 一樣或著就是 p,則選取 */
/* 顯示結果參考: */
/* 

*/ /*
  • (正常)
*/ /*

*/ /*
  • (綠色)
*/ /*
  • (正常)
*/ /*
*/ /*
  • (正常)
*/

套用到屬性

/* 當 a 標籤屬性 href 的值為 https 開頭時,把顏色設為紅色 */
a[href^="https"] { color:red; }
/* 和 a[href|="https"] 的效果一樣,但 |= 在定義上著重在語言 */

/* 當 a 標籤屬性 href 的值為 .pdf 結尾時,把顏色設為綠色 */
a[href$=".pdf"] { color:green; }

/* 將 title 屬性裡有"電腦"兩個字的元素設定背景顏色為綠色 */
[title*="電腦"] { background-color:green; }
/* 只要有出現"電腦"兩個字就會被選取,例如 title="電腦人" ,和 [title~="電腦"] 不同 */

特殊狀態的應用

這裡的規則不是每一種瀏覽器都有支援,請注意註解上的標示。IE8以前的瀏覽器全部不支援。

/* 設定每一個標籤裡的第一個 p 標籤顏色為綠色 */
p:first-of-type { color:green; }

/* 設定每一個標籤裡的"最後"一個 p 標籤顏色為藍色 */
p:last-of-type { color:blue; }

/* 當某個標籤裡只有1個 p 標籤時,將 p 標籤裡的顏色設為紅色 */
p:only-of-type { color:red; }

/* 當某個標籤裡只有1個子元素,且子元素是 p 標籤時,將 p 標籤裡的顏色設為紅色 */
p:only-child { color:red; }

/* 如果某個標籤裡的第2個元素是 p 標籤,將 p 標籤裡的顏色設為藍色(可將2改為其它數值) */
p:nth-child(2) { color:blue; }

/* 如果某個標籤裡"倒數"第2個元素是 p 標籤,將 p 標籤裡的顏色設為藍色(可將2改為其它數值) */
p:nth-last-child(2) { color:blue; }

/* 設定每一個標籤裡的第2個 p 標籤顏色為綠色(可將2改為其它數值) */
p:nth-of-type(2) { color:green; }
/* p:nth-of-type(1) 和 p:first-of-type 的效果一樣 */

/* 設定每一個標籤裡的"倒數"第2個 p 標籤顏色為綠色(可將2改為其它數值) */
p:nth-last-of-type(2) { color:green; }
/* p:nth-last-of-type(1) 和 p:last-of-type 的效果一樣 */

/* 如果某個標籤裡"最後"一個元素是 p 標籤,將 p 標籤裡的顏色設為藍色 */
p:last-child { color:blue; }
/* 和 p:nth-last-child(1) 效果一樣,目前沒有任何瀏覽器支援 */

/* 將文件的根元素設定背景為黑色。以HTML來說,根元素就是 */
:root { background:black; }

/* 將空的div標籤

設定高度為20px (標籤內不可有內容) */ div:empty { height:20px; } /* 當使用者點選一個錨的連結時,把目標位罝 裡的顏色設為紅色 */ :target { color:red; } /* IE瀏覽器不支援 */ /* 如果這個 input 欄位允許使用者輸入,將背景設成黃色 */ input:enabled { background:yellow; } /* 如果這個 input 欄位不允許使用者輸入(disabled="disabled"),將背景設成灰色 */ input:disabled { background:gray; } /* 如果這個 input 被選取(checked="checked"),將背景(只有input)設成黃色 */ input:checked { background:yellow; } /* 只有Opera支援 */ /* 選取所有 p 以外的標籤 */ :not(p) { } /* 目前沒有任何瀏覽器支援 */ /* 將滑鼠圈選的字變成紅色(原本是反白) */ ::selection { color:red; } ::-moz-selection { color:red; } /* Firefox所支援的語法 */

CSS系列文章參考網站:W3Schools

CSS濾境參考書目:

More about CSS玩美樣式範例語典