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

2021-10-01 16:14:48 字數 1168 閱讀 1411

前端學習經驗（7）

結構偽類選擇器：減少類選擇器和id選擇器的定義

child系列：

first-child：選擇父級元素中的第乙個子元素，必須是子元素中的第乙個元素

父元素》子元素（第乙個）標籤:first-child
如：

子元素1


子元素3


子元素4


子元素5


子元素5.1


子元素5.2


子元素5.3


子元素6
last-child：選擇父級元素中的最後乙個子元素，必須是子元素中的最後乙個元素

父元素》子元素（最後乙個）標籤:last-child
如：

子元素1


子元素3


子元素4


子元素5


子元素5.1


子元素5.2


子元素5.3


子元素6
only-child：選擇父級元素中的唯一的乙個子元素，必須是子元素中的唯一的乙個元素,用於場景判斷

父元素》子元素（唯一乙個）標籤:only-child
如：

唯一的子元素
nth-child(n)：選擇父級元素的第n個子元素。(正著找符合條件的子元素)，n：可以使用數字，函式，英文等。

數字：1，2，3，…

公式：如 2n+1，3n+1，…

英文：odd(奇數)，even(偶數)

父元素》子元素（指定第幾個）標籤:nth-child(n)
如：
nth-last-child(n)：選擇父級元素的倒數第n個子元素。(倒著找符合條件的子元素)，n：可以使用數字，函式，英文等。

數字：1，2，3，…

公式：如 2n+1，3n+1，…

英文：odd(奇數)，even(偶數)

父元素》子元素（指定倒數第幾個）標籤:nth-last-child(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 設定滑鼠懸停到標...