mg不朽情缘8个红妹多少倍

書名： Div+CSS3.0網頁布局案例精粹（升級版）
作者名：張曉景
本章字數： 3128字
更新時間： 2020-03-02 16:09:22

2.7 偽類選擇符和偽元素選擇符

CSS選擇符中除了包括基礎選擇符和層次選擇符，還包括偽類選擇符和偽元素選擇符，正確地使用偽類選擇符和偽元素選擇符，可以使用戶的HTML代碼結構更加清晰合理，同時也能在一定程度上減少JavaScript對DOM的操作。

大家最熟悉的偽類選擇符莫過于超鏈接的4種偽類選擇符（:link、:hover、:visited和:active），因為這4種偽類選擇符是在網頁制作過程中經常用到的。而CSS 3的偽類選擇符可以分為6種：動態偽類選擇符、目標偽類選擇符、語言偽類選擇符、UI狀態偽類選擇符、結構偽類選擇符和否定偽類選擇符。

偽類選擇符的語法規則與其他CSS選擇符的有所區別，需要以英文冒號開頭，語法規則如下：

其中，E為HTML中的元素，pseudo-class為CSS的偽類選擇符名稱。

2.7.1 動態偽類選擇符

動態偽類選擇符在最初的CSS中就有，并不是后來添加的，動態偽類并不存在于HTML中，只有當用戶與網站頁面交互的時候才能夠體現出來。動態偽類有兩種：一種是在超鏈接中經常看到的錨點偽類；另一種是用戶行為偽類。動態偽類選擇符的語法說明如表2-5所示。

表2-5 動態偽類選擇符的語法說明

2.7.2 目標偽類選擇符

目標偽類選擇符“:target”是眾多實用的CSS特性中的一個，用來匹配頁面的URI中某個標志符的目標元素。具體來說，URI中的標志符通常會包含一個井號，后面帶有一個標簽符名稱，如#contact:target，就是用來匹配id名稱為contact的元素的。換一種說法，在Web頁面中，一些URL擁有片段標識符，它由一個井號后跟一個錨點或元素id組合而成，可以鏈接到頁面中的某個特定元素。目標偽類選擇符選取鏈接的目標元素，然后為該元素定義相應的CSS樣式。

2.7.3 語言偽類選擇符

語言偽類選擇符是根據元素的語言編碼匹配元素。這種語言信息必須包含在文檔中，或者與文檔相關聯，不能從CSS樣式中指定。為HTML文檔指定語言，可以在<html>標簽或<body>標簽中通過添加lang屬性并設置相應的語言值進行設置。例如：

或

語言偽類選擇符允許為不同的語言定義特殊的規則，這在多語言版本的網站中應用非常方便。語言偽類選擇符的語法規則如下：

2.7.4 UI元素狀態偽類選擇符

UI元素狀態偽類選擇符也是CSS選擇符模塊組中的一部分，主要用于網頁中的form表單元素，以提高網頁的人機交互水平、操作邏輯性及頁面的整體美觀性，使表單頁面更具個性與品位，并且使用戶操作頁面表單更簡單。

UI元素的狀態一般包括：啟用、禁用、選中、未選中、獲得焦點、失去焦點、鎖定和待機等。在HTML元素中有可用和不可用狀態，如表單中的文本輸入框；HTML元素中還有選中和未選中狀態，如表單中的復選按鈕和單選按鈕。這幾種狀態都是CSS選擇符中常用的UI元素狀態偽類選擇符，其語法說明如表2-6所示。

表2-6 UI元素狀態偽類選擇符語法說明

2.7.5 結構偽類選擇符

CSS選擇符中包括結構偽類選擇符，這種選擇符可以根據元素在HTML文檔樹中的某些特性（如相對位置）定位到它們，也就是說，通過文檔樹結構的相互關系來匹配特定的元素，從而減少HTML文檔對id名類名稱的定義，幫助用戶在制作HTML頁面時保持頁面代碼的干凈與整潔。

在使用結構偽類選擇符之前，一定要清楚HTML文檔的樹狀結構中元素之間的層級關系。結構偽類選擇符的語法說明如表2-7所示。

表2-7 結構偽類選擇符的語法說明

表2-7中所介紹的結構偽類選擇符中，只有:first-child屬于之前的CSS，結構偽類選擇符為用戶提供精確定位到元素的新方式。

2.7.6 偽類選擇符瀏覽器適配

1．動態偽類選擇符瀏覽器適配

動態偽類選擇符的瀏覽器兼容性如表2-8所示。

表2-8 動態偽類選擇符的瀏覽器兼容性

從表2-8中可以看出，大多數的主流瀏覽器都能夠全面支持各種動態偽類選擇符，需要注意的是，E:active和E:focus這兩種動態偽類選擇符只有IE8及其以上版本的IE瀏覽器才支持，而E:hover選擇符在IE6及其以下版本的瀏覽器中僅支持超鏈接元素的hover偽類，而不支持其他元素的hover偽類。

E:active和E:focus這兩種動態偽類選擇符本身用處并不是很多，并且目前使用IE 9以下版本IE瀏覽器的用戶也越來越少，所以基本上可以忽略IE瀏覽器的兼容性問題。

2．目標偽類選擇符瀏覽器適配

目標偽類選擇符的瀏覽器兼容性如表2-9所示。

表2-9 動態偽類選擇符的瀏覽器兼容性

從表2-9中可以看出，大多數的主流瀏覽器都能夠支持目標偽類選擇符，主要是IE 9以下版本的IE瀏覽器不支持目標偽類選擇符，但IE瀏覽器用戶單擊頁面中的鏈接仍然能夠跳轉到相應的鏈接位置，只是鏈接位置不會應用目標偽類選擇符所定義的CSS樣式效果。

3．語言偽類選擇符瀏覽器適配

語言偽類選擇符的瀏覽器兼容性如表2-10所示。

表2-10 語言偽類選擇符的瀏覽器兼容性

從表2-10中可以看出，IE8以下版本的IE瀏覽器不支持語言偽類選擇符，其他的瀏覽器都能夠很好地支持語言偽類選擇符。對于追求完美的設計師來說，可能還是會擔心其兼容性而不敢使用。其實也不是沒有辦法，可以采用上一章中所講解的通用方法，為頁面添加IE條件注釋語句，判斷IE瀏覽器版本，在IE7及其以下版本的IE瀏覽器中調用另一套CSS樣式來實現，代碼如下：

4．UI元素狀態偽類選擇符瀏覽器適配

UI元素狀態偽類選擇符的瀏覽器兼容性如表2-11所示，從中可以看出，除IE瀏覽器以外，其他各種主流瀏覽器對UI元素狀態偽類選擇符的支持性都非常好，IE9及其以上版本的IE瀏覽器也能夠全面支持UI元素狀態偽類選擇符。

表2-11 UI元素狀態偽類選擇符的瀏覽器兼容性

考慮到國內還有很多用戶使用IE9以下版本的IE瀏覽器，使用UI元素狀態偽類選擇符時想要獲得更好的瀏覽器兼容性可以通過以下兩種方法來處理。

第一種方法是使用JavaScript庫，選用內置已兼容了UI元素狀態偽類選擇符的JavaScript庫或框架，然后在代碼中引入它們并完成相要的效果。

第二種方法是在不支持UI元素狀態偽類選擇符的IE瀏覽器下添加類CSS樣式。例如，禁用的按鈕效果，可以先在表單元素的標簽中添加一個類CSS樣式（如類CSS樣式名稱為.disabled），然后定義該類CSS樣式。CSS樣式設置代碼如下：

5．結構偽類選擇符瀏覽器適配

結構偽類選擇符的瀏覽器兼容性如表2-12所示。

表2-12 結構偽類選擇符的瀏覽器兼容性

從表2-12中可以看出，除IE瀏覽器以外，其他各主流瀏覽器對結構偽類選擇符的支持性都非常好，IE9及其以上版本的IE瀏覽器也能夠全面支持結構偽類選擇符。

如果要使IE 9以下版本的IE瀏覽器表現出相同的效果，通常有兩種方法。

第一種方法是引用JavaScript腳本文件，從而使IE 9以下版本的IE瀏覽器同樣能夠支持結構偽類選擇符。這種方案的不足之處是，如果瀏覽器禁用腳本，則會喪失整個功能。

第二種方法是使用通用的IE條件注釋語法來判斷IE瀏覽器的版本，在IE9以下版本的IE瀏覽器中引用另外一套CSS樣式，在這套CSS樣式中使用傳統的選擇符來達到相同的效果，而不使用結構偽類選擇符。

2.7.7 偽元素選擇符

除了偽類選擇符，CSS還支持訪問偽元素選擇符。其實偽元素選擇符在CSS中一直存在，大家平時看到的有“:first-letter”“:first-line”“:before”“:after”。CSS對偽元素選擇符進行了一定的調整，在以前的基礎上增加了一個冒號，也就相應地變成了 “::first-letter”“::first-line”“::before”“::after”，另外偽元素選擇符還增加了一個“::selection”。

1.::first-letter

::first-letter偽元素選擇符用來選擇文本塊的第一個字母，通常用于給文本元素添加排版細節，如首字下沉效果。寫法如下：

2.::first-line

::first-line偽元素選擇符的使用方法和::first-letter偽元素選擇符的使用方法類似，也常用于文本排版，但是::first-line偽元素選擇符用來匹配元素的第一行文本，可以使第一行文字應用一些特殊的樣式。例如，將段落文本的第一行顯示為傾斜體的效果，CSS樣式代碼如下：

3.::before和::after

::before和::after偽元素選擇符不是指存在于標記中的內容，而是指可以插入額外內容的位置。要通過::before和::after偽元素選擇符在頁面中生成內容，還需要配合content屬性一起使用。

4.::selection

在瀏覽器默認的情況下，如果頁面為淺色背景，則選中的文本內容會顯示深藍色的背景和白色的字體；如果頁面為深色背景，則選中的文本會顯示白色的背景和深藍色的字體。通過使用CSS中的::selection偽元素選擇符，可以改變在網頁中選中的文本的突出顯示效果。但是目前瀏覽器對::selection偽元素選擇符的支持性不是很好，Webkit內核的瀏覽器可以支持該偽元素，在IE瀏覽器中只有IE 9以上版本才支持，Firefox瀏覽器也需要加上其私有屬性-moz才支持。

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

Div+CSS3.0網頁布局案例精粹（升級版）