詳細講解偽類選擇器nth of type

2021-09-11 10:23:38 字數 1215 閱讀 8069

:nth-of-type屬於css3的新增選擇器,用起來很方便,所以我們有必要在這裡詳細說一下。

我是第乙個p

我是第二個p

我是第三個p

我是第四個p

我們以這個例子進行說明

當css**寫成這樣時

p:nth-child(2)
結果是

如果當css**換成這樣結果又會是什麼樣的呢?

h1:nth-child(2)
結果是並不會有元素變紅

這是因為:nth-child(2)會首先找父元素的第二個子元素,然後再進行匹配,看第二個子元素是否為指定的元素,如果是,才會進行渲染。

接下來再看一下nth-of-type的用法

h1:nth-of-type(2)
這時結果為:

如果**為

p:nth-of-type(2)
則結果為

由此可見,nth-of-type(n)的用法並不會受到其他型別的影響,它會去找指定型別的同類元素中指定序號的元素。

實際上,不管是nth-child還是nth-of-type中能夠傳的引數都不只是乙個數字而已。

(1)傳數字(注意是從1開始哦!!!

這種用法比較簡單,不再贅述

(2)傳關鍵字

可以傳的關鍵字包括odd(奇數),even(偶數)。

(3)傳表示式(an+1),這時候就是乙個迴圈(這時候n從0開始迴圈,到3停止)

例如,想讓偶數個元素變為紅色

可以寫成

p:nth-of-type(2n)
奇數個元素變為紅色,可以寫成

p:nth-of-type(2n+1)

屬性選擇器,偽類選擇器,偽元素選擇器

屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...

偽類選擇器

作用根據連線的不同狀態可以以不同的方式顯示 偽類是css 用於向某些選擇器新增特殊的效果。a標籤中有四個 link visited hover active 用法示例 a link 未訪問的連線 顏色可以自定義 a visited 已訪問的連線 hover 滑鼠移動到連線上時顯示的效果 a acti...

偽類選擇器

偽類選擇器 用來設定 某些元素在特殊情況下的屬性 例如 超連結在訪問之後的樣式,文字框獲得輸入焦點後的樣式,文字被選中後的樣式。等 1 visited 這個偽類選擇器用於 超連結。指的是 訪問之後的超連結的樣式。只能修改顏色。3 link 普通超連結的樣式 可以設定顏色 背景顏色。等等 4.hove...