捕鱼机节目怎么装

書名：精通HTML5+CSS3+JavaScript網頁設計（視頻教學版）（第2版）
作者名：王英英
本章字數： 4353字
更新時間： 2019-12-09 14:24:00

6.4 CSS3選擇器

選擇器（selector）也被稱為選擇符。所有HTML語言中的標記都是通過不同的CSS選擇器進行控制的。選擇器不只是HMTL文檔中的元素標記，還可以是類（Class，這不同于面向對象程序設計語言中的類）、ID（元素的唯一特殊名稱，便于在腳本中使用）或是元素的某種狀態（如a:link）。根據CSS選擇器用途可以把選擇器分為標記選擇器、類選擇器、全局選擇器、ID選擇器和偽類選擇器等。

6.4.1 標記選擇器

HTML文檔是由多個不同標記組成的，而CSS選擇器就是聲明那些標記樣式風格的。例如，p選擇器，就是用于聲明頁面中所有<p>標記的樣式風格；同樣，也可以通過h1選擇器來聲明頁面中所有<h1>標記的樣式風格。

標記選擇器最基本的形式如下所示。

     tagName{property:value}

技巧提示

其中，tagName表示標記名稱，例如p、h1等HTML標記；property表示CSS3屬性；value表示CSS3屬性值。

通過聲明一個具體標記，可以對文檔里這個標記出現的每一個地方應用樣式定義。這種做法通常用在設置那些在整個網站都會出現的基本樣式。例如，下面的定義就用于為一個網站設置默認字體。

這個選擇器聲明了一系列的標記，所有這些標記出現的地方都將以定義的樣式（字體、字號和顏色）顯示。理論上僅聲明〈body〉標記就已經足夠（因為所有其他標記會出現在〈body〉標記內部，并且將因此繼承它的屬性），但是許多瀏覽器不能恰當地將這些樣式屬性帶入表格和其他標記里。因此，為了避免這種情況，這里聲明了其他標記。

【例6.10】（實例文件：ch06\6.10.html）

     <!DOCTYPE html>
     <html>
     <head>
     <title>標記選擇器</title>
     <style>
     p{color:blue;       /*設置字體的顏色為藍色*/
     font-size:20px;  /*設置字體的大小*/
     }
     </style>
     </head>
     <body>
     <p>此處使用標記選擇器控制段落樣式</p>
     </body>
     </html>

在IE 11.0中的瀏覽效果如圖6-16所示，其中段落字體以藍色顯示，大小為20px。

圖6-16 標記選擇器顯示

如果在后期維護中需要調整段落顏色，只需要修改color屬性值即可。

技巧提示

CSS3標準對于所有屬性和值都有相對嚴格的要求，如果聲明的屬性在CSS3規范中沒有或者某個屬性值不符合屬性要求，都不能使CSS語句生效。

6.4.2 類選擇器

使用標記選擇器可以控制該頁面中所有相關標記的顯示樣式，如果需要對其中一系列標記重新設定，此時僅使用標記選擇器是遠遠不夠的，還需要使用類選擇器。

類選擇器用來為一系列標記定義相同的呈現方式，常用語法格式如下所示。

     .classValue{property:value}

classValue是選擇器的名稱，具體名稱由CSS制定者自己命名。如果一個標記具有class屬性且class屬性值為classValue，那么該標記的呈現樣式由該選擇器指定。在定義類選擇符時，需要在classValue前面加一個句點“.”，示例如下所示。

上面定義了兩個類選擇器，分別為rd和se。類的名稱可以是任意英文字符串或以英文開頭與數字的組合，一般情況下采用其功能或效果的縮寫。

在<p>標記的class屬性中使用類選擇符，示例如下所示。

     <p class="rd">class屬性是被用來引用類選擇器的屬性</p>

類選擇器只能被應用于指定的標記中（例如<p>標記），可以在不同標記中使用相同的呈現方式，例如：

     <p class="rd">段落樣式</p>
     <h3 class="rd">標題樣式</h3>

【例6.11】（實例文件：ch06\6.11.html）

在IE 11.0中的瀏覽效果如圖6-17所示。其中，第一個段落字體以藍色顯示，大小為20px；第二個段落字體以紅色顯示，大小為22px；標題字體同樣以紅色顯示，大小為22px。

圖6-17 類選擇器顯示

6.4.3 ID選擇器

ID選擇器和類選擇器類似，都是針對特定屬性的屬性值進行匹配。ID選擇器定義的是某一個特定的HTML標記，一個網頁文件中只能有一個標記使用某一ID的屬性值。

定義ID選擇器的基本語法格式，如下所示。

     #idValue{property:value}

在上述基本語法格式中，idValue是選擇器名稱，可以由CSS定義者自己命名。如果某標記具有id屬性，并且該屬性值為idValue，那么該標記的呈現樣式由該ID選擇器指定。在正常情況下id屬性值在文檔中具有唯一性。在定義ID選擇器時，需要在idValue前面加一個“#”符號，示例如下所示。

與類選擇器相比，使用ID選擇器定義樣式是有一定局限性的，類選擇器與ID選擇器主要有以下兩種區別：

（1）類選擇器可以給任意數量的標記定義樣式，但ID選擇器在頁面的標記中只能使用一次。

（2）ID選擇器比類選擇器具有更高的優先級，即當ID選擇器與類選擇器發生沖突時，優先使用ID選擇器定義的樣式。

【例6.12】（實例文件：ch06\6.12.html）

在IE 11.0中的瀏覽效果如圖6-18所示。其中，第一個段落字體以紅色顯示，大小為22px；第二個段落字體以藍色顯示，字形加粗；標題字體同樣以紅色顯示，大小為22px。

圖6-18 ID選擇器顯示

從上面的代碼可以看出，標題h3和第一個段落都使用了名稱textstyle的ID選擇器并都顯示了CSS方案。這里需要指出的是，將ID選擇器用于多個標記是錯誤的，因為每個標記定義的ID不只是CSS可以調用，JavaScript等腳本語言同樣也可以調用。如果一個HTML中有兩個相同id的標記，那么將會導致JavaScript在查找id時出錯。

技巧提示

JavaScript等腳本語言也能調用HTML中設置的id，因此ID選擇器一直被廣泛使用。網頁設計者在編寫HTML代碼時應該養成一個習慣，一個id只賦予一個HTML標記。

6.4.4 全局選擇器

如果想要一個頁面中的所有HTML標記使用同一種樣式，可以使用全局選擇器。全局選擇器，顧名思義就是對所有HTML標記起作用，其語法格式為：

     *{property:value}

其中，“*”表示對所有標記起作用，property表示CSS3屬性名稱，value表示屬性值，示例如下所示。

     *{margin:0; padding:0;}  /*設置所有標記的外邊距和內邊距都為0*/

【例6.13】（實例文件：ch06\6.13.html）

在IE 11.0中的瀏覽效果如圖6-19所示，兩個段落和標題都是以紅色字體顯示，字體大小為30px。

圖6-19 全局選擇器

6.4.5 組合選擇器

將多種選擇器進行搭配，可以構成一種復合選擇器，也稱為組合選擇器，即將標記選擇器、類選擇器和ID選擇器組合起來使用。一般的組合方式是標記選擇器和類選擇器組合或標記選擇器和ID選擇器組合。由于這兩種組合方式的原理和效果一樣，所以本小節只介紹標記選擇器和類選擇器的組合。

組合選擇器只是一種組合形式，并不算是一種真正的選擇器，但在實際應用中會經常使用，其語法格式為：

     tagName. class Value{property:value}

在使用的時候一般用在重復出現并且樣式相同的一些標記里，例如li列表、td單元格和dd自定義列表等，示例如下所示。

     h1.red{color: red}
     <h1 class="red"></h1>

【例6.14】（實例文件：ch06\6.14.html）

在IE 11.0中的瀏覽效果如圖6-20所示。其中，第一個段落顏色為紅色，采用的是標記選擇器；第二個段落顯示的是藍色，采用的是標記選擇器和類選擇器組合的選擇器；標題以綠色字體顯示，采用的是類選擇器。

圖6-20 組合選擇器顯示

6.4.6 繼承選擇器

繼承選擇器的規則是：子標記在沒有定義的情況下所有的樣式是繼承父標記的；當子標記重新定義父標記已經定義過的聲明時，子標記會執行后面的聲明，其中與父標記不沖突的地方仍然沿用父標記的聲明。

使用繼承選擇器就必須先了解HTML文檔樹和CSS繼承，這樣才能夠很好地運用繼承選擇器。每個HTML都可以被看作一個文檔樹，文檔樹的根部就是<html>標記，而<head>和<body>標記就是其標記。在<head>和<body>里的其他標記就是<html>標記的孫子標記。整個HTML就呈現一種祖先和子孫的樹狀關系。CSS的繼承是指子孫標記繼承祖先標記的某些屬性，示例如下所示。

對于上面的代碼而言，如果其修飾樣式為：

     .test span img {border:1px blue solid;}

則表示該選擇器先找到class為test的標記，然后從它的子標記里查找<span>標記，再從<span>的子標記中找到<img>標記。也可以采用下面的形式：

     div span img {border:1px blue solid;}

可以看出其規律是從左往右依次細化，最后鎖定要控制的標記。

【例6.15】（實例文件：ch06\6.15.html）

在IE 11.0中的瀏覽效果如圖6-21所示。其中，第一個標題顏色為紅色，但是“繼承”兩個字使用綠色顯示并且大小為40px，除了這兩個設置外的其他CSS樣式都是繼承父標記<h1>的樣式（例如下畫線設置），第二個標題雖然使用了font標記修飾選擇器，但其樣式都是繼承于父類標記<h1>。

圖6-21 繼承選擇器

6.4.7 偽類

偽類也是選擇器的一種，但是用偽類定義的CSS樣式并不是作用在標記上的，而是作用在標記的狀態上。由于很多瀏覽器支持不同類型的偽類，并且沒有一個統一的標準，因此很多偽類都不常被用到。偽類包括:first-child、:link、:vistited、:hover、:active、:focus和:lang等。其中有一組偽類是主流瀏覽器都支持的，就是超鏈接的偽類，包括:link、:vistited、:hover和:active。

偽類選擇器定義的樣式最常應用在標記<a>上，表示超鏈接4種不同的狀態：未訪問超鏈接（link）、已訪問超鏈接（visited）、鼠標停留在超鏈接上（hover）和激活超鏈接（active）。需要注意的是，<a>標記可以只具有一種狀態（:link），也可以同時具有兩種或者三種狀態。比如說，任何一個有href屬性的<a>標記，在未有任何操作時都已經具備了:link狀態，也就是滿足了有鏈接屬性這個條件；如果是訪問過的<a>標記，就會同時具備:link、visited兩種狀態；把鼠標指針移到訪問過的<a>標記上時，<a>標記就同時具備了:link、visited、hover三種狀態。示例如下所示。

     a:link{color:#FF0000; text-decoration:none}
     a:visited{color:#00FF00; text-decoration:none}
     a:hover{color:#0000FF; text-decoration:underline}
     a:active{color:#FF00FF; text-decoration:underline}

技巧提示

上面的樣式表示該超鏈接未訪問時顏色為紅色且無下畫線，訪問后是綠色且無下畫線，鼠標指針放在超鏈接上為藍色且有下畫線，激活超鏈接時為紫色且有下畫線。

【例6.16】（實例文件：ch06\6.16.html）

在IE 11.0中的瀏覽效果如圖6-22所示。將鼠標指針停留在第一個超鏈接上方時，顯示顏色為藍色；另一個是訪問過后的超鏈接，顯示顏色為綠色。

圖6-22 偽類顯示

6.4.8 屬性選擇器

前面在使用CSS3樣式對HTML標記進行修飾時，都是通過HTML標記名稱或自定義名稱指向具體的HTML元素，進而控制HTML標記樣式。那么能不能直接通過標記屬性來進行修飾，而不通過標記名稱或自定義名稱。直接使用屬性控制HTML標記樣式的選擇器稱為屬性選擇器。

屬性選擇器根據某個屬性是否存在或屬性值來尋找元素，因此能夠實現某些非常有意思和強大的效果。CSS2標準就已經出現了4個屬性選擇器，在CSS3標準中又新加了3個屬性選擇器，也就是說現在的CSS3標準共有7個屬性選擇器，它們共同構成了CSS功能強大的標記屬性過濾體系。

在CSS3標準中，常見屬性選擇器如表6-1所示。

表6-1 常見屬性選擇器

【例6.17】（實例文件：ch06\6.17.html）

在IE 11.0中的瀏覽效果如圖6-23所示。其中，第一個段落使用屬性align定義樣式，其字體顏色為紅色；第二個段落使用屬性值left修飾樣式，其字體顏色為紅色，大小為20px并且加粗顯示，是因為該段落使用了align這個屬性；第三個段落字體顯示為藍色，且帶有下畫線，是因為屬性lang的值前綴為en。最后一個圖片以邊框樣式顯示，是因為屬性值后綴為gif。

圖6-23 屬性選擇器顯示

6.4.9 結構偽類選擇器

結構偽類選擇器（Structural pseudo-classes）是CSS3新增的類型選擇器。顧名思義，結構偽類就是利用文檔結構樹（DOM）實現元素過濾，也就是說，通過文檔結構的相互關系來匹配特定的元素，從而減少文檔內對class屬性和id屬性的定義，使得文檔更加簡潔。

在CSS3版本中，新增結構偽類選擇器，如表6-2所示。

表6-2 新增結構偽類選擇器

【例6.18】（實例文件：ch06\6.18.html）

在IE 11.0中的瀏覽效果如圖6-24所示。其中，表格中奇數行顯示指定顏色，并且最后一行字體的大小以20px顯示，其原因就是采用了結構偽類選擇器。

圖6-24 結構偽類選擇器

6.4.10 UI元素狀態偽類選擇器

UI元素狀態偽類（The UI element states pseudo-classes）也是CSS3新增選擇器。其中，UI即User Interface（用戶界面）的簡稱。UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性，有品味，還要讓軟件的操作變得舒適、簡單、自由、充分體現軟件的定位和特點。

UI元素的狀態一般包括可用、不可用、選中、未選中、獲取焦點、失去焦點、鎖定、待機等。CSS3定義了3種常用的狀態偽類選擇器，詳細說明如表6-3所示。

表6-3 常用的狀態偽類選擇器

【例6.19】（實例文件：ch06\6.19.html）

在IE 11.0中的瀏覽效果如圖6-25所示。其中，表格中可用的表單元素都顯示為淺黃色，而不可用的元素顯示為灰色。

圖6-25 UI元素狀態偽類選擇器應用

官术网_书友最值得收藏!

精通HTML5+CSS3+JavaScript網頁設計（視頻教學版）（第2版）

6.4 CSS3選擇器

6.4.1 標記選擇器

6.4.2 類選擇器

6.4.3 ID選擇器

6.4.4 全局選擇器

6.4.5 組合選擇器

6.4.6 繼承選擇器

6.4.7 偽類

6.4.8 屬性選擇器

6.4.9 結構偽類選擇器

6.4.10 UI元素狀態偽類選擇器