CSS動態僞類選擇器溫故

時間 2019-11-20

標籤 css 動態選擇器溫故欄目 CSS 简体版

原文原文鏈接

動態僞類選擇器html

僞類選擇器：你們熟悉的：【: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）IE六、IE七、IE8，a:link的針對性比其餘3個都弱ui

1.2.動態僞類選擇器兼容性編碼

注：IE6瀏覽器僅支持連接錨點a:hoverspa

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

2.2目標僞類選擇器語法htm

注：目標僞類選擇器是動態選擇器，只有存在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語言僞類選擇器
使用語言僞類選擇器來匹配使用語言的元素是很是有用的，特別是用於多語言版本的網站，起做用更是明顯。可使用它來根據不一樣語言版本設置頁面的字體風格

3.2語言僞類選擇器語法
語言僞類選擇器是根據元素的語言編碼匹配元素。這種語言信息必須包含在文檔中，或者與文檔關聯，不能從CSS指定。
爲文檔指定語言，有兩種方法：
1.<!DOCTYPE HTML><html lang="en-US">
2.<body lang="fr">
語言僞類選擇器容許不一樣的語言定義特殊的規則，這在多語言版本的網站用起來是特別的方便。
E(element):lang(language)表示選擇匹配E的全部元素，且匹配元素指定了lang屬性，其值是language

3.3瀏覽器兼容性

注：對於IE六、IE7這些不兼容的瀏覽器，咱們能夠引用不同名字的樣式表

3.4實戰

<body>
<style>
:lang(en){quotes:'"' '"';}
:lang(en) q{background:red;}
:lang(fr){quotes:'?' '?';}
:lang(fr) q{background:green;}
</style>
<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q>
we hope they succeed.
</p>

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僅支持單冒號