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()選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算；
• :first-of-type選擇一個上級元素下的第一個同類子元素；
• :last-of-type選擇一個上級元素的最后一個同類子元素；
• :nth-of-type()選擇指定的元素；
• :nth-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=1、2、3、4、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是用來選擇沒有任何內容的元素，這里沒有內容指的是一點內容都沒有，哪怕是一個空格