CSS中的偽類

1.動態偽類

　:link(未訪問)，:visited(已訪問)，:hover(經過)，:active(點擊時)，:focus(獲取焦點時)

　順序:link-> visited-> focus-> hover-> avtive

/* :hover 和 :active 除了在 a 元素中可以使用,也可以在其他元素中使用 */
strong:hover{
    color:red;
}

<strong> 這是一個 strong 元素內容</strong>

擴展：

　focus偽類常用與 input 元素中，a 元素中也可以使用 focus 偽類

　a 元素使用 tab 鍵時，會有焦點狀態，去除 a 元素的焦點狀態

方式一：(去除輪廓線(並沒有真正去除焦點狀態))

a:focus{
    outline:none;
}

方式二:(通過 tabindex,可以調整 tab 的選中元素的順序)

<a tabindex='-1' href='#'>Google一下</a>

2.目標偽類(不常用)

　:target

/* 一般用於錨點鏈接,當點擊 a 標簽跳轉到某個錨點位置,更改錨點位置的樣式 */
:target{
    color:red;
}

3.語言偽類(不常用)

　:lang()

4.元素狀態偽類(不常用)

　:enabled(可用)，:disabled(禁用)，:checked(被選中)

5.結構偽類

　:nth-child(n)(在所有子元素中查找第n個子元素)

　:nth-last-child(n)(從后向前查找第n個子元素)

　div:nth-of-type(n)(只查找 div 類型的第 n 個子元素)

　:nth-last-of-type(n)(從后向前查找 指定類型的第 n 個子元素)

 

　:first-child 等同於 :nth-child(1)

　:last-child  等同於 :nth-last-child(1)

　:first-of-type 等同於 :nth-of-type(1)

　:last-of-type 等同於 :nth-last-of-type(1)

 

　:only-child 父元素中唯一的子元素

　:only-of-type 父元素中唯一的這種類型的子元素

　:root 根元素,就是HTML元素

　:empty 內容完全空白的元素

6.否定偽類

　:not(x)

:not(div){
    color:red;
}
/* 除 div 之外的其他元素字體顏色是紅色 */