CSS學習之二：選取器

1、元素選取器：往往是HTML元素，也可能是XML定義的元素，舉例：

h1 {color:red;}/* 元素選取器 */h2 {font:normal 12px/16px "Courier New",Arial;}/* css關鍵字由空格隔開，只有font屬性中字型大小和行高可用“/”分割 */h3,p {background-color:#EEE;}/* 選取器的分組 */

2、通配選取器，它為頁面中所有元素添加樣式，就像是一個萬用字元，舉例：

* {color:blue;}/* 通配選取器，等價於列出了文檔中所有元素的color屬性均為blue，它的優先順序很低 */*.p {font-weight:bold;}/* 類別選取器，運用到所有類為p的元素上，可以忽略(*)號，等價於.p */

3、類別選取器：多的不廢話，說一下多類別選取器吧，舉例：

有如下HTML代碼：

<p class="p">This is a paragraph</p><!-- 類選擇符 --><div class="p">This is a div element</div><!-- 類選擇符 --><p class="urgent warning">This is a paragraph</p><!-- 多類選擇符，一個class可以包含一個詞列表，各個詞之間用空格隔開 --><p class="urgent warning help">Those words's background-color is red too in all browser!</p><!-- 多類選擇符，.waring.urgent選取器將不能匹配這裡的p --><p class=" help ie6">Those words's background-color is red in browser ie6!</p><!-- 多類選擇符，由於help在選取器中最後出現，所以在IE6中背景為紅色的 --><p class="help">Those words's background-color is red in browser ie6!</p><!-- 類選擇符，由於help在選取器中最後出現，所以在IE6中背景為紅色的 --><p>This is a paragraph<span class="warning"> But this is a span element</span></p>

CSS風格如下：

p.p {font-style:italic;}/* 類別選取器，選擇段落且類為p時才顯示粗體 */.waring {font-weight:bold;}.urgent {font-style:italic;}.warning.urgent {background-color:silver;}/* 類別選取器，選擇同時包含waring和urgent兩個類的元素，且出現的順序可以和定義class時不同 */p.warning.urgent.help {background-color:red;}/* 類別選取器，選擇同時包含waring,urgent和help三個類的p元素，但是在IE6中此選擇符匹配class屬性中包含help的所有p元素 */

在非IE6下面，CSS裡如果有.warning.urgent.help這類的選取器，它只匹配同時包含waring,urgent和help三個類的HTML元素，而HTML中諸如class="urgent warning help"這類的選取器卻可以匹配CSS中多種樣式；而在IE6下卻不同，這一點是很值得注意的。

4、ID選取器：比起類別選取器來說，ID選取器不會那麼複雜，ID屬性不允許有以空格分隔的詞列表，比如以下的寫法是不對的：

<div id="div1 div2">...</div><!-- 這種寫法是不對的 -->

 無論CSS怎麼寫，樣式都會無效。可是，ID選擇符與類選擇符是可以結合使用的，如下：

#div.div {color:red;}/* ID選取器與類別選取器的結合，可以這麼寫的，且先後順序可以顛倒 */

匹配即聲明ID為div又聲明屬於div這個類的HTML元素。

還有要補充一點，既然使用了ID選擇符，那麼就只能對一種元素中的一個元素使用ID，比如下面的寫法就不對：

<h1 id="important">important</h1><em id="important">important</em><ul id="important">important</ul>

這三種（個）元素具有相同的ID，在同一個文檔中不能夠同時出現，這也體現出ID的唯一性。

5、屬性選擇符：目前遺憾的是屬性選取器沒有被IE6識別，而IE7及以上IE系列支援大多數CSS2.1屬性選取器。

簡單的屬性選擇符執行個體：

a[href] {color:yellow;}/* 簡單的屬性選擇符，匹配所有具有href屬性的a元素 */*[title] {font-weight:bold;}/* 簡單的屬性選擇符，匹配所有具有title屬性的元素 */a[href][title] {color:red;}/* 簡單的屬性選擇符，匹配所有有title屬性且有href屬性的的a元素 */

下面是根據具體屬性值選擇：

a[href="../chemdemo/"] {color:yellow;}/* 根據具體屬性值選擇，匹配連結為“../chemdemo/”的a標籤 */p[class="urgent warning"] {font-weight:bold;}/* 根據具體屬性值選擇，要求屬性值必須完全符合，寫成class="urgent"或其他是不對的 */

上例中，p[class="urgent warning"]嚴格匹配具有 class="urgent warning"類的p元素，urgent與warning的順序不顛倒。

下面是根據部分屬性值選擇：對於class="urgent warning"這個類，CSS可以這樣寫：

p[class~="warning"] {color:red;}/* 根據部分屬性值選擇，“~”表示屬性中出現一個空格分隔的詞來完成選擇相應的p元素 */[class~="urgent"] {color:grey;}/* 根據部分屬性值選擇，“~”表示屬性中出現一個空格分隔的詞來完成選擇 */

當然不僅僅只局限於class屬性，任何屬性都可以使用屬性選擇符，比如選取器img[title~="Figure"]會匹配title值為含有“空格和Figure”的映像。

還有以下幾種子串匹配屬性選取器：

[class^="cl"] {}/* 子串匹配屬性選取器，“^=”匹配class屬性的值以cl開頭的元素 */[class$="dy"] {}/* 子串匹配屬性選取器，“$=”匹配class屬性的值以dy結尾的元素 */[class*="ou"] {}/* 子串匹配屬性選取器，“*=”匹配class屬性的值還有ou的元素 */

最後一種屬性選取器是特定屬性選擇類型，例子如下：

*[lang|="en"] {}/* 選擇lang屬性為en或以en-開頭的所有元素 */img[src|="figure"] {}/* 可以用來選擇圖片名為“figure-”的系列圖片 */

6、根據HTML標籤的嵌套關係選擇元素：

一種是選擇後代元素：

h4 em {}/* 為h4元素的後代em元素添加樣式 */ul ol li em {}/* 後代選取器，不局限於兩個選取器 */

一種是選擇子項目：

加入有HTML代碼：

<h2>This is <strong>very</strong> important.</h2><!-- strong元素是h2的子項目、後代元素 --><h2>This is <em>really <strong>very</strong></em> important.</h2><!-- strong元素是h2的後代元素而非子項目 -->

那麼下面的CSS將使前面的“very”以粗體顯示：

h2 > strong {color:red;}/* 選擇作為h2元素的所有子項目中的strong元素 */

還有一種是選擇相鄰兄弟元素：當不想選擇所有後代元素時，可用選擇相鄰兄弟元素的辦法縮小選取範圍：

h2 + p {}/* 選擇緊跟在h2後面的p元素（注意是對p添加樣式），它們是兄弟元素（必須有相同的父元素）*/html > body tabke + ul {}/* 多種選擇符的結合運用 */

 註：IE6不支援子選取器和相鄰選取器。

7、偽類：

只運用於連結得偽類有兩個：“:link”和“:visited”，相信瞭解CSS的人都不陌生，這裡不再舉例；

動態偽類：在CSS2.1中包括三種：“:focus”、“:hover”和“:active”，在Web頁面中常用的方式是與靜態偽類結合：

a:link {}a:visited {}a:hover {}a:active {}

偽類順序很重要，個人的記憶方法為love-hate（愛與恨）。

動態偽類可以運用到任何元素，比如：

input:focus {background:#DDD;}/* 反白一個有輸入焦點的表單元素 */*:hover {background:gray;}/* 從body元素繼承的所有元素在指標停留時會顯示灰色背景 */

如果要選擇元素的第一個子項目，可以用“:first-child”靜態偽類：

CSS樣式：

p:first-child,li:first-child {background:#CCC;}

HTML代碼：

<div><p>p1</p><!-- 背景為灰色 --><p>p2</p><ul><li>1</li><!-- 背景為灰色 --><li>2</li><li>3</li></ul></div>

注意：IE6不支援“:first-child”靜態偽類。

下面是關於結合偽類的用法：

a:link:hover {color:red;}/* 順序可交換，即可以為a:hover:link，IE6中只會注意:hover而忽略：link部分 */a:visited:hover {color:maroon;}/* 順序可交換，IE6中只會注意:hover而忽略：link部分 */

上面的樣式可以實現滑鼠指標停留在未訪問連結上時，連結為紅色，當停留在已訪問過的連結上時，顏色為紫紅色。

還可以根據語言來選擇，即使用:lang為類：

*:lang(fr) {font-style:italic;}/* 把法語元素變成斜體 */

更多語言代碼請查閱CSS手冊。

此外，還有:first、:left:、right三種偽類，它們僅用於@page規則，例如：

@page :right { margin: 4cm }/* 設定頁面容器位於裝訂邊右邊的所有頁面使用的樣式 */@page :first {}/* 設定頁面容器第一頁使用的樣式 */

 8、虛擬元素：CSS2.1中有:first-letter、:first-line、:before、:after四種虛擬元素，執行個體：

p {width:500px;}/* 使用:first-line前先設定元素寬度，如果未指定對象的width屬性，首行的內容長度隨視窗寬度而定 */p:first-line {color:red;}/* 不管是否設定了p的寬度，p元素內第一段文字總是以紅色顯示 */p:first-letter {font-size:2em;}h2:before {content:"{";color:green;}/* 在h2元素的內容前面添加了一個“{”符號，並且顏色為綠色 */h2:after {content:"}";color:green;}/* 在h2元素的內容後面添加了一個“}”符號，並且顏色為綠色 */h3:after {content:"END";color:red;}/* 非IE6瀏覽器中，h3元素最後會添加紅色的的“END”單詞 */span:before {content:"s";color:red;}/* 非IE6瀏覽器中，span前面會添加一個紅色的“s” */span:first-letter {color:green;font-size:40px;}/* span元素的第一個單詞不會變成綠色，大小為預設值 */span {position:absolute;}/* 對span使用絕對位置後，第一個字母變為綠色，大小為40px */

得出的結論是：

1）IE6支援:first-line和:first-letter虛擬元素，不支援:after和:before虛擬元素；
2）:first-line和:first-letter只能用於區塊層級元素，:after和:before適合塊級和行內元素；
3）行內元素設定設定position屬性為absolute,或者設定display屬性為block後，:first-line和:first-letter有效。