CSS僞類

1).動態僞類

• :link        /*連接沒有被訪問時/
• :visited   /*連接被訪問事後*/
• :hover    /*鼠標懸浮在連接上時*/
• :active    /*鼠標點中激活連接那一下*/
• :focus    /*用於元素成爲焦點*/

動態僞類，由於這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是咱們在連接中常看到的錨點僞類，如":link",":visited";另一種被稱做用戶行爲僞類，如「:hover」,":active"和":focus"。

 

2).狀態僞類

• :enabled
• :disabled
• :checked

咱們把":enabled",":disabled",":checked"僞類稱爲UI元素狀態僞類，這些主要是針對於HTML中的Form元素操做

 

3).CSS3的:nth選擇器

:nth序號選擇器有如下：

• :first-child選擇某個元素的第一個子元素；
• :last-child選擇某個元素的最後一個子元素；
• :nth-child()選擇某個元素的一個或多個特定的子元素；
• :nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；
• :nth-of-type()選擇指定的元素；
• :nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算；
• :first-of-type選擇一個上級元素下的第一個同類子元素；
• :last-of-type選擇一個上級元素的最後一個同類子元素；
• :only-child選擇的元素是它的父元素的惟一一個了元素；
• :only-of-type選擇一個元素是它的上級元素的惟一一個相同類型的子元素；

1）:first-child和:last-child

a:first-child{}
a:last-child{}

2）:nth-child()和:nth-last-child()

//下面的length爲整數，n從0開始不斷增長1（n=一、二、三、四、5...）

:nth-child(length);          /*參數是具體數字*/
:nth-child(n);               /*所有*/
:nth-child(2n)               /*2的倍數-偶數*/
:nth-child(2n+1);            /*2的倍數加一-奇數*/
:nth-child(n+length)         /*length加n，n必定要放在前面，包含lengtn,由於n從0開始*/
:nth-child(-n+length);       /*length減n，n必定要放在前面，包含length，由於n從0開始*/
:nth-child(-3n+10)           /*10減3的倍數，n必定要放在前面，包含length，由於n從0開始*/

:nth-last-child()就是:nth-child()從最後往前數

3）:nth-of-type()和:nth-last-of-type()

相似於:nth-child和:nth-last-child,可是這個是相對在同一種元素計算的，在兄弟元素中同種元素的第幾個

4）:first-of-type和:last-of-type

相似於:first-child和:last-child,可是這個是相對在同一種元素計算的，在兄弟元素中同種元素的第一個和最後一個

5）:only-child和:only-of-type

分表表示只有一個子元素和同一種元素只有一個

6）:not和:empty

否認選擇器和jq中的:not選擇器如出一轍，就拿form中的元素來講明這個選擇器的用法，好比你想對form中全部input加邊框，但又不想submit也起變化，此時就可使用:not爲實現

:not(selector)

div:not(.className){color:red}

:empty

:empty是用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格