CSS偽類選擇符歸納

標籤：radio   strong   滑鼠移至上方   排除   介面   執行   沒有   需要   一個   

偽類選擇符歸納

偽類選擇符比較多，不加以歸類很難記清楚記全；我們可以先把他分為兩類

• 和元素本身轉態有關，類似於連結點擊前，點擊後
• 和元素在DOM結構中所處的結構有關，類似於第n個元素，或者奇數行。

一、和元素本身轉態有關

1. :link,:visited,:hover,:active
   • :link指的是超連結在訪問前的狀態
   • :visited指的是超連結在訪問後的轉態
   • :hover指的是滑鼠移至上方在元素上的狀態
   • :active指的是滑鼠點擊元素不放時的轉態
     這幾個偽類的書寫有一定的順序，:link和:visited的狀態表示的是一個靜態狀態，即連結要麼就是被啟用過，要麼就是沒啟用過，啟用後的css屬性如果與啟用前衝突，則覆蓋啟用前的屬性；而:hover和:active是動作屬性，設定這樣的偽類css的目的就是為了使得執行相應動作時能夠顯示相應的狀態，也就是希望屬性衝突時，覆蓋靜態屬性。因此:hover和:active偽類要寫在後面從而覆蓋靜態屬性，而:active又是在:hover基礎上的動作，因此，:hover在:active之前。
     正常順序是::link :visited :hover :active
2. :focus,:empty,:checked,:enabled,:disabled,:target
   • :focus設定對象在成為輸入焦點（該對象的onfocus事件發生）時的樣式。
   • :empty匹配沒有任何子項目（包括text節點）的元素
   • :checked匹配使用者介面上處於選中狀態的元素(用於input type為radio與checkbox時)
   • :enabled匹配使用者介面上處於可用狀態的元素
   • :disabled匹配使用者介面上處于禁用狀態的元素
   • :target匹配相關URL指向的元素
     這些偽類都不太常用，需要可以查詢使用。

二、和元素在DOM結構中所處的結構有關

1. child類型：作為孩子該滿足的條件
   • :first-child: 元素得是其父元素的第一個子項目才匹配
   • :last-child: 元素得是其父元素的最後一個子項目才匹配
   • :nth-child(n): 元素得是其父元素的第n個子項目才匹配
   • :nth-last-child(n): 元素得是其父元素的倒數第n個子項目才匹配
   • :only-child: 元素得是其父元素的唯一一個子項目才匹配
2. of-type類型：作為同類元素的兄弟該滿足的條件
   • :first-of-type: 元素得是其父元素的第一個該類元素才匹配
   • :last-of-type: 元素得是其父元素的最後一個該類元素才匹配
   • :only-of-type: 元素得是其父元素的唯一一個該類元素才匹配
   • :nth-of-type(n): 元素得是其父元素的第n個該類元素才匹配
   • :nth-last-of-type(n): 元素得是其父元素的倒數第n個子項目才匹配
3. 其他
   • not: 排除元素
     例： li:not(:first-child): 元素不是其父元素的第一個子項目的li元素被匹配

CSS偽類選擇符歸納