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:link	link 偽類選擇器 - 匹配 E 元素未被按下的元素	-
E:visited	link 偽類選擇器 - 匹配 E 元素已被按過的元素	-
E:active	dynamic 偽類選擇器 - 匹配 E 元素滑鼠按下時的元素	-
E:hover	dynamic 偽類選擇器 - 匹配 E 元素滑鼠滑過時的元素	-
E:focus	dynamic 偽類選擇器 - 匹配 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 值為 warning	div[class="red"] { color: Red; }
E[foo~="warning"]	屬性選擇器 - 匹配 E 元素屬性 foo 可能包含多個用空格隔開的值，其中有一個值為 warning 的元素	div[class~="red"] { color: Red; }
E[lang|="en"]	屬性選擇器 - 匹配 E 元素屬性 lang 可能包含多個用連字符號隔開的值，以 en 開頭的元素	-
DIV.warning	Class選擇器 - 匹配 DIV 元素 class 為 warning 的元素	div.red { color: Red; } 等同於 div[class~="red"]
E#myid	ID選擇器 - 匹配 E 元素 id 為 myid 的元素	div#sn { color: Red; }

回JQuery目錄
回首頁