導讀：

CSS3 中有許多偽類選擇器，其中一些偽類選擇器的作用近似卻又不完全一樣，下面我們就來看一看到底有什么不一樣。

1、:only-child 與 :only-of-type

• • 測試的代碼：

<div><p>something</p> </div> <div><div>other something</div><p>something</p> </div>

• :only-child 是指匹配屬于父元素中唯一子元素的元素。設置 p:only-child { background-color:#00ff00; } 后表現為：

  something

  other something

  something

• :only-of-type是指匹配指定元素的父元素中唯一相同類型的子元素(該父元素可以有很多子元素，而與指定匹配的元素屬于同一種類型的子元素是唯一的，則為其設定樣式)。設置 p:only-of-type { background-color:#00ff00; } 后表現為：

  something

  other something

  something

2、:first-child 與 :first-of-type

• • 測試的代碼：

<div><p>something</p><div>other something</div> </div> <div><div>other something</div><p>something</p> </div>

• :first-child 是指匹配的對象是其所在的父元素的第一個元素。設置 p:first-child { background-color:#00ff00; } 后表現為：

  something

  other something other something

  something

• :first-of-type 是指匹配的對象是其所在的父素的第一個相同類型元素。設置 p:first-of-type { background-color:#00ff00; } 后表現為：

  something

  other something other something

  something

3、:last-child 與 :last-of-type 可以參考 :first-child 與 :first-of-type 的思路

4、:nth-child(n) 與 :nth-of-type(n)

• • 測試的代碼：

<div><div>other something</div><p>something</p><p>something</p><p>something</p> </div>

• nth-child(n) 是指匹配的對象是其所在的父元素的第 n 個元素。設置 p:nth-child(n) { background-color:#00ff00; } 后表現為：
  • 當 n 為 1(數字) 時：沒有被選中的元素。
  • 當 n 為 2(數字) 時： other something

    something

    something

    something

  • 當 n 為 n+3(公式) 時： other something

    something

    something

    something

  • 當 n 為 -n+3(公式) 時： other something

    something

    something

    something

  • 當 n 為 2n(公式) 時： other something

    something

    something

    something

  • 當 n 為 2n+1(公式) 時： other something

    something

    something

    something

• tips:上面中的 n 的取值可以是數字，一個關鍵字，一個公式(此時 n 是一個從0開始的計數器）。當 n 取值 -n+2 表示小于等于2；當 n 取值 n+2 表示大于等于2；當 n 取值 2n 表示取偶數，也可以用 even 代替；當 n 取值 2n-1 表示去奇數，也可以用 odd 代替。
• nth-of-type(n) 是指匹配的對象是其所在的父素的第 n 個相同類型元素。設置 p:nth-of-type(n) { background-color:#00ff00; } 后表現為：
  • 當 n 為 1(數字) 時： other something

    something

    something

    something

  • 當 n 為 2(數字) 時： other something

    something

    something

    something

  • 當 n 為 n+3(公式) 時： other something

    something

    something

    something

  • 當 n 為 -n+3(公式) 時： other something

    something

    something

    something

  • 當 n 為 2n(公式) 時： other something

    something

    something

    something

  • 當 n 為 2n+1(公式) 時： other something

    something

    something

    something

5、:nth-last-child(n) 與 :nth-last-of-type(n) 可以參考 :nth-child(n) 與 :nth-of-type(n) 的思路

?

若是文中有什么錯誤，歡迎大家指正批評，愿與大家在問題的交流之中共同進步。愈激烈，愈深刻。

轉載于:https://www.cnblogs.com/anani/p/8614392.html

總結

以上是生活随笔為你收集整理的CSS 中功能相似伪类间的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。