CSS動態偽類選擇器溫故-3-怪誕咖啡

偽類選擇器：大家熟悉的：【:link】【:visited】【:hover】【:active】
CSS3的偽類選擇器分為六種：
（1）動態偽類選擇器
（2）目標偽類選擇器
（3）語言偽類選擇器
（4）UI偽類選擇器
（5）結構偽類選擇器
（6）否定偽類選擇器
注：和其它CSS選擇器的區別-偽類選擇器都以冒號【:】開頭

思考問題？
（1）CSS3偽類選擇器有什么功能？
（2）選定元素能帶來什么便利？

1.1.動態偽類選擇器語法
動態偽類包含兩種：
（1）在鏈接中?？吹降腻^點偽類
（2）為用戶行為偽類

（3）錨點偽類設置遵循【愛恨原則LoVe/HAte】，即link->visited->hover->active
（4）IE6、IE7、IE8，a:link的針對性比其他3個都弱

1.2.動態偽類選擇器兼容性

注：IE6瀏覽器僅支持鏈接錨點a:hover

2.1目標偽類選擇器：用來匹配文檔（頁面）的URI中某個標識符的目標元素

標題1
標題2
標題3
內容1
內容2
內容3

2.2目標偽類選擇器語法

注：目標偽類選擇器是動態選擇器，只有存在URL指向該匹配元素時，樣式效果才會生效

2.3目標偽類選擇器瀏覽器兼容性

注：目標偽類選擇器在IE8及之前版本不被支持，但IE用戶點擊目錄里的鏈接仍將跳轉到相應的標題，只是標題不會高亮顯示；IE低版本需要高亮效果要動用JS

2.4目標偽類選擇器引起的相關知識記憶方法：

關于三角形角標記法：（統一設置transparent）
1.上下指向，左右為transparent
2.左右指向，上下為transparent
3.方向指向哪里，哪里為transparent

transition:property duration timing-function delay;
property:相當于對應的運動員
duration:相當于目標，多長時間完成
timing-function:選擇對應的跑道
delay:還要等待多久

3.1語言偽類選擇器
使用語言偽類選擇器來匹配使用語言的元素是非常有用的，特別是用于多語言版本的網站，起作用更是明顯?？梢允褂盟鼇砀鶕煌Z言版本設置頁面的字體風格

3.2語言偽類選擇器語法
語言偽類選擇器是根據元素的語言編碼匹配元素。這種語言信息必須包含在文檔中，或者與文檔關聯，不能從CSS指定。
為文檔指定語言，有兩種方法：
1.
2.
語言偽類選擇器允許不同的語言定義特殊的規則，這在多語言版本的網站用起來是特別的方便。
E(element):lang(language)表示選擇匹配E的所有元素，且匹配元素指定了lang屬性，其值是language

3.3瀏覽器兼容性

注：對于IE6、IE7這些不兼容的瀏覽器，我們可以引用不一樣名字的樣式表

3.4實戰

WWF's goal is to:

build a future where people live in harmony with nature

we hope they succeed.

4.1UI元素狀態偽類選擇器
主要用于form表單元素上，以提高網頁的人機交互、操作邏輯以及頁面的整體美觀，使表單頁面更具個性與品位，而且使用戶操作頁面表單更便利和簡單

4.2UI元素狀態偽類選擇器語法
UI元素狀態包括：啟用、禁用、選中、未選中、獲得焦點、失去焦點、鎖定和待機等。
HTML元素表單文本輸入框，分啟用和禁用；
HTML元素表單單選按鈕和多選按鈕，分選中和未選中；

4.3瀏覽器兼容性

IE9已經可以全面支持UI元素狀態偽類選擇器了
至于IE6 ~ IE8，就得采用JS庫來解決兼容性問題

5.1結構偽類選擇器
結構偽類選擇器是根據元素在文檔樹中的某些特性（如相對位置）定位到它們。也就是，通過文檔樹結構的相互關系來匹配特定的元素，從而減少HTML文檔對ID或類名的定義，幫助你保持代碼干凈和整潔；就是通過DOM文檔樹才獲取對應的元素

5.2結構偽類選擇器語法

讓你分清結構偽類選擇器的神器！

5.3結構偽類選擇器瀏覽器兼容性

5.4結構偽類選擇器中的參數n
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
（1）參數n為具體的數值：可以是任何大于0的正整數
（2）參數n為表達式【n*length】：n從零開始計算，length>0的整數；為n的倍數
（3）參數n為表達式【n+length】：選擇>=length的元素
（4）參數n為表達式【-n+length】：選擇<=length的元素
（5）參數n為表達式【n*length+b】：b為偏移值，表示隔length個元素選中第n*length+b個元素
（6）參數n為關鍵詞【odd】：選擇奇數
（7）參數n為關鍵詞【even】：選擇偶數

“:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。

first-child選擇的一定是第一個，但是first-of-type選擇的不一定是第一個

6.1否定偽類選擇器
否定選擇器【:not()】是CSS3的新選擇器，類型jQuery中的【:not()】，用來定位不匹配該選擇器的元素

6.2否定偽類選擇器語法
起到過濾內容的作用

6.3瀏覽器兼容性

7偽元素

CSS2.1中用到的：【:first-line】【:first-letter】【:before】【:after】
CSS3對偽元素進行了調整，在之前的基礎上增加了一個冒號【::first-line】【::first-letter】【::before】【::after】，還增加了【::selection】
瀏覽器，對這兩種方法都支持

（1）偽元素::first-letter：用來選擇文本塊的第一個字母，eg：下沉首字母
（2）偽元素::first-line：用來選擇元素的第一行文本
（3）偽元素::before和::after：不是指存在于標記中的內容，而是可以插入額外內容的位置。盡管生成的內容不會成為DOM的一部分，但它同樣可以設置樣式；要為偽元素生成內容，還需要配合content屬性
（4）偽元素::selection：用來匹配突出顯示的文本，也就是用鼠標選中文本之后的樣式【注】::selection僅接受兩個屬性，一個是background，另一個是color

注：對于IE6 ~ IE8僅支持單冒號

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com