CSS的結構偽類選擇器 type系列

2021-10-01 16:47:49 字數 908 閱讀 1749

前端學習經驗(8)

type系列:

first-of-type:選擇同型別的標籤或選擇器中第乙個元素。

父元素》標籤或選擇器:first-of-type
如:

子元素2

子元素3

子元素4子元素7

子元素8

子元素10

子元素11

子元素12

first-of-type:選擇同型別的標籤或選擇器中最後乙個元素。

父元素》標籤或選擇器:last-of-type
如:

子元素2

子元素3

子元素4子元素7

子元素8

子元素10

子元素11

子元素12

nth-of-type(n):選擇同型別的標籤或選擇器中第n個元素,n:可以使用數字,函式,英文等。

數字:1,2,3,…

公式:如 2n+1,3n+1,…

英文:odd(奇數),even(偶數)

父元素》標籤或選擇器:nth-of-type(n)
如:

nth-last-of-type(n):選擇同型別的標籤或選擇器中第n個元素,n:可以使用數字,函式,英文等。

數字:1,2,3,…

公式:如 2n+1,3n+1,…

英文:odd(奇數),even(偶數)

父元素》標籤或選擇器:nth-of-type(n)
如:

CSS偽類選擇器(結構偽類)

結構選擇器 獲去當前元素的第乙個子元素 li first child 結構選擇器 獲去當前元素的最後乙個子元素 li last child 結構選擇器 選擇某個元素的乙個或者多個特定的子元素 li nth child 3 結構選擇器 選擇某個元素的乙個或者多個特定的子元素 從這個元素的最後乙個子元素...

CSS偽類選擇器

原來學習過css偽類選擇器,前幾天寫css發現自己並不熟悉了。這兩天把它撿起來複習一下 css偽類選擇器是用於向某些元素新增特定的效果。錨偽類 包括四種狀態,活動狀態,未被訪問狀態,已被訪問狀態,懸停效果。example a link a visited a hover a active fist ...

css偽類選擇器

link 設定超連結的預設樣式 例如 a a link 不推薦使用 有相容性 one link 不推薦使用 有相容性 visited 設定標籤被訪問過後的樣式 例如 a visited 注意 該偽類選擇器一般不會大量使用,因為瀏覽器存在快取問題。只能設定與顏色相關的屬性 hover 設定滑鼠懸停到標...