2008/11/17

規則集合

規則集合(Rule sets)用在區塊風格表與外部風格表檔案。規則集合由選擇器與風格定義區塊組成。其語法是:

選擇器 { 風格定義區塊 }

選擇器可設定各種選擇條件,當 HTML 的元素符合選擇條件時,才會採用其定義的風格。風格定義區塊接在選擇器之後,頭尾用兩個”{” ”}”包夾。區塊內含多組特徵與值,特徵與值用”:”相連;兩組特徵與值間用”;”分開。可用”/*”與”*/”加入解說。選擇器在 HTML 文件是不分大小寫;在 XML 則大小寫不同。選擇器的基本語法如下:

* | E | E F | E > F | E:準類別 | E ~ F | E + F | E, F | E[att] | E.name | E#id
*

星號 * 表所有元素。

  • 這個範例用了類別 .c1 ,這是為了與部落格中的元素區分開來。下面的範例也都如此。

E

E 是 HTML 元素的名稱。


E F

E F是兩個 HTML 元素的名稱,表示當 F 元素是 E 元素的後代時,選擇條件符合。

:HOVER, :ACTIVE 的應用。這個練習製作一個下拉式選單。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

E > F

E F是兩個 HTML 元素的名稱。E > F 表示當 F 元素是 E 元素的子代時,選擇條件符合。

  • 上面的例子中,第二個 STRONG 是孫代,所以不符合選擇條件。
  • IE6 失敗;IE8, Firefox3.0, Safari, Chrome 都成功。

E:active
E:first-child
E:focus
E:hover
E:lang
E:link
E:visited

以上規則,請參考說明與範例


E ~ F

E F是兩個 HTML 元素的名稱。表示 F 元素在 E 元素之後,且 F 元素與 E 元素有相同的父元素,則選擇條件符合。

  • IE6 失敗;Firefox, Safari, Chrome 都成功。

:HOVER, :ACTIVE 的應用。這個練習利用滑鼠在三個 I 元素 上的游移,改變 EM 元素 的內容。

  • Firefox 成功;IE6, Safari, Chrome 失敗。

E + F

E F是兩個 HTML 元素的名稱。表示當 F 元素是直接接在 E 元素的後面時,選擇條件符合。

  • IE6 失敗;IE8, Firefox3.0, Safari, Chrome 都成功。

E, F

多個選擇器可以使用相同的風格定義區塊,兩個選擇器用","分開。

E[att]
E[att=val]
E[att~=val]
E[att|=val]
E[att^=val]
E[att$=val]
E[att*=val]

以上規則,請參考說明與範例


E.name

只能用在 HTML 文件,用”.”表示類別。E.name 表示 HTML 元素 E 的 CLASS 屬性設為 name 時,選擇條件符合。*.name 可省略寫成 .name。類別定義可以用來將元素分類,用不同的展現風格。

E#id007

用”#”宣告 ID。E#id007 表示元素的 ID 為 id007 時,選擇條件符合。由於 ID 在網頁中有唯一性,所以通常不加元素名稱。