2011年5月28日 星期六

css 選擇器 ( css selector)

css 對於美化與設計網頁有著不可或缺的重要角色,當你需要某些區塊有什麼顏色、抑或是某些背景,加入在 tag 的 attribute 之中,當然,建議在另一樣式檔案( *.css )編輯,在用 link tag 匯入樣式檔案,這樣網頁的程式碼,看起來更簡潔。

而在這樣式檔案之中,有以下一些規則,在此作介紹。

( 引用網址:http://www.w3.org/TR/CSS2/selector.html )

各位可以先去了解哪些瀏覽器有支援 css 3的功能,提供一個網址給大家參考http://www.findmebyip.com/litmus



以下為 css 2.1 選擇器語法的介紹:
樣式描述範例
*通用選擇器 - 匹配任何元素* { color: Red;}
所有元素 color 變為 Red
E類型選擇器 - 匹配任何 E 元素div { color: Red; } div 元素 color 變為 Red
E F後代選擇器 - 匹配任何 E 底下所有 F 元素div span { color: Red; }
div 底下所有 span 元素 color 變為 Red
E > F子代選擇器 - 匹配任何 E 子代所有 F 元素div > span { color: Red; }
div 子代所有 span 元素 color 變為 Red,並不等同於後代選擇器,注意「子代」的意思
E:first-child:first-child 偽類選擇器 - 匹配 E 父元素的第一個 E 元素p > em:first-child 所有 p 元素底下的第一個 em 元素 color 變為 Red
E:linklink 偽類選擇器 - 匹配 E 元素未被按下的元素 -
E:visitedlink 偽類選擇器 - 匹配 E 元素已被按過的元素 -
E:activedynamic 偽類選擇器 - 匹配 E 元素滑鼠按下時的元素 -
E:hoverdynamic 偽類選擇器 - 匹配 E 元素滑鼠滑過時的元素 -
E:focusdynamic 偽類選擇器 - 匹配 E 元素獲得焦點時的元素 -
E:lang(c) :lang() 偽類選擇器 - 匹配 E 元素 lang 屬性為 c 的元素div:lang(c) { color: Red; }
所有 div 的 lang 屬性為 c 的元素 color 變為 Red
E + F相鄰選擇器 - 匹配緊鄰 E 元素後同級 F 元素div + span { color: Red; }
緊鄰 div 之後的 span 同級元素
E ~ F鄰後選擇器 - 匹配 E 元素後同級 F 元素div ~ span { color: Red; }
div 之後的 span 同級元素
E[foo]屬性選擇器 - 匹配 E 元素屬性有 foo 的元素(無視有無值)div[class] { color: Red; }
E[foo="warning"]屬性選擇器 - 匹配 E 元素屬性 foo 值為 warningdiv[class="red"] { color: Red; }
E[foo~="warning"]屬性選擇器 - 匹配 E 元素屬性 foo 可能包含多個用空格隔開的值,其中有一個值為 warning 的元素div[class~="red"] { color: Red; }
E[lang|="en"]屬性選擇器 - 匹配 E 元素屬性 lang 可能包含多個用連字符號隔開的值,以 en 開頭的元素-
DIV.warningClass選擇器 - 匹配 DIV 元素 class 為 warning 的元素div.red { color: Red; }
等同於 div[class~="red"]
E#myidID選擇器 - 匹配 E 元素 id 為 myid 的元素div#sn { color: Red; }

回JQuery目錄
回首頁

沒有留言 :

張貼留言

Related Posts Plugin for WordPress, Blogger...