僞類選擇器水坑

區別：
:單冒號就是僞類，::雙冒號是僞元素

1、:first-child & :last-child

元素集的第一個子元素或者最後一個子元素

2、:nth-child(n) & :nth-last-child(n)

元素集的第n個子元素或者倒數第n個子元素，注意n從1開始，不是從0

3、:only-child

當一個元素裏面只有一個子元素的時候起效，father son:only-child

4、input僞類

:focusinput聚焦時的樣式，不知道爲何沒有:blur
:checkedcheckbox選中時
:disabledinput標籤設置了disabled的屬性
:enabledinput標籤

5、a標籤僞類

按照這個順序寫
:link初始狀態
:visited訪問事後的狀態
:focus聚焦時的狀態
:hover鼠標通過是的狀態
:active鼠標點擊激活時的狀態
Tips
hover能夠適用於其餘的元素，不單單侷限於a標籤

7、類型僞類

E F:nth-of-type(n)          選擇父元素的具備指定類型的第n個子元素
E F:nth-last-of-type(n)     選擇父元素的具備指定類型的倒數第n個子元素
E F:first-of-type           選擇父元素中具備指定類型的第1個子元素，與E F:nth-of-type(1)相同
E F:last-of-type         　  選擇父元素中具備指定類型的最後1個子元素，與E F:nth-last-of-type(1)相同
E F:only-of-type        　　 選擇父元素中只包含一個同類型的子元素

Tips
nth-child和nth-of-type的區別，nth-child是按順序來數節點，若是選擇li:nth-child(2)，正常來講是第二個li，但若是你把第二個li位置加了一個別的標籤，那麼就沒有效果了，nth-of-type則不是按照節點來數，是按照標籤類型來數，也就是無論你在兩個li標籤中間插入多少個別的標籤，它始終會選擇第二個li標籤

8、特殊僞類

:root        　選擇文檔的根元素
:not         　選擇除某個元素以外的全部元素
:empty         選擇沒有子元素的元素，並且該元素也不包含任何文本節點
:target     　 匹配錨點對應的目標元素

Tips
一個標籤能夠多個僞類同時使用

9、僞類表

/* Logical Combinations */
    :matches() /*:any()*/   /* 匹配 集合內指定 的元素 */
    :not()                  /* 排除 知足指定關係 的元素 */
    :has()                  /* 匹配 知足指定關係 的元素*/


    /* Linguistic Pseudo-classes */
    :dir()                  /* 匹配 設置dir(文字書寫方向)屬性 的元素 */
    :lang()                 /* 匹配 設置lang(定義元素語言)屬性 的元素 */


    /* Location Pseudo-classes */
    :any-link               /* 匹配 任意有連接錨點 的元素*/
    :link                   /* 匹配 未處於訪問記錄中 的連接 */
    :visited                /* 匹配 處於訪問記錄中 的連接 */
    :target                 /* 匹配 URL指向的錨點 的元素 */
    :scope                  /* 匹配 設置scoped屬性的style標籤 的做用域 */


    /* User Action Pseudo-classes */
    :hover                  /* 匹配 處於鼠標懸停狀態 的元素 */
    :active                 /* 匹配 處於激活狀態 的元素 */
    :focus                  /* 匹配 處於聚焦狀態 的元素 */
    :focus-ring             /* 匹配 處於聚焦狀態元素 的UA樣式(聚焦輪廓) */
    :focus-within           /* 匹配 子節點處於聚焦狀態 的元素 */
    :drop                   /* 匹配 處於拖拽狀態 的元素 */
    :drop()                 /* 匹配 處於指定拖拽狀態 的元素 */


    /* Time-dimensional Pseudo-classes */
    :current                /* 匹配 處於當前狀態 的定義了timeline屬性的元素 */
    :past                   /* 匹配 處於過去狀態 的定義了timeline屬性的元素 */
    :future                 /* 匹配 處於未來狀態 的定義了timeline屬性的元素 */


    /* Resource State Pseudos */
    :playing                /* 匹配 處於播放狀態 的元素 */
    :paused                 /* 匹配 處於暫停狀態 的元素 */


    /* The Input Pseudo-classes */
    :enabled                /* 匹配 能夠編輯 的元素 */
    :disabled               /* 匹配 禁止編輯 的元素 */
    :read-only              /* 匹配 內容只讀 的元素 */
    :read-write             /* 匹配 內容可編輯 的元素 */
    :placeholder-shown      /* 匹配 顯示字段佔位符文本 的元素 */
    :default                /* 匹配 頁面載入默認選中 的元素 */

    :checked                /* 匹配 選中狀態 的元素 */
    :indeterminate          /* 匹配 模糊狀態 的元素 */

    :valid                  /* 匹配 輸入內容經過類型驗證 的元素 */
    :invalid                /* 匹配 輸入內容沒法經過類型驗證 的元素 */
    :in-range               /* 匹配 輸入數值符合範圍 的元素 */
    :out-of-range           /* 匹配 輸入數值溢出範圍 的元素 */
    :required               /* 匹配 設置必填屬性 的元素 */
    :optional               /* 匹配 可選字段 的元素 */
    :user-invalid           /* 匹配 用戶輸入內容未經過驗證 的元素 */

    /* Tree-Structural pseudo-classes */
    :root                   /* 匹配 文檔樹 的根元素*/
    :empty                  /* 匹配 無子節點 的元素 */
    :blank                  /* 匹配 僅包含空格或者換行符 的元素 */

    :nth-child(n)           /* 匹配 符合元素集合中指定位置 的元素 */
    :nth-last-child(n)      /* 反序匹配 符合元素集合內指定位置 的元素 */
    :first-child            /* 匹配 符合元素集合內首個 的元素 */
    :last-child             /* 匹配 符合元素集合內末尾 的元素 */
    :only-child             /* 匹配 無兄弟節點 的元素 */

    :nth-of-type(n)         /* 匹配 符合元素集合中同類型指定位置 的元素 */
    :nth-last-of-type(n)    /* 反序匹配 符合元素集合中同類型指定位置 的元素 */
    :first-of-type          /* 匹配 每一個在元素集合中初次出現 的元素 */
    :last-of-type           /* 匹配 每一個在元素集合中末次出現 的元素 */
    :only-of-type           /* 匹配 無同類兄弟節點 的元素*/


    /* Fullscreen API */
    :fullscreen             /* 匹配 全屏顯示模式中 的元素 */


    /* Page Selectors */
    :first                  /* 打印文檔時首頁的樣式 */
    :left                   /* 打印文檔時左側的樣式 */
    :right                  /* 打印文檔時右側的樣式 */