CSS學習之二:選取器

來源:互聯網
上載者:User

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有效。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.