導(dǎo)讀：

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

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

• • 測(cè)試的代碼：

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

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

  something

  other something

  something

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

  something

  other something

  something

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

• • 測(cè)試的代碼：

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

• :first-child 是指匹配的對(duì)象是其所在的父元素的第一個(gè)元素。設(shè)置 p:first-child { background-color:#00ff00; } 后表現(xiàn)為：

  something

  other something other something

  something

• :first-of-type 是指匹配的對(duì)象是其所在的父素的第一個(gè)相同類(lèi)型元素。設(shè)置 p:first-of-type { background-color:#00ff00; } 后表現(xiàn)為：

  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)

• • 測(cè)試的代碼：

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

• nth-child(n) 是指匹配的對(duì)象是其所在的父元素的第 n 個(gè)元素。設(shè)置 p:nth-child(n) { background-color:#00ff00; } 后表現(xiàn)為：
  • 當(dāng) n 為 1(數(shù)字) 時(shí)：沒(méi)有被選中的元素。
  • 當(dāng) n 為 2(數(shù)字) 時(shí)： other something

    something

    something

    something

  • 當(dāng) n 為 n+3(公式) 時(shí)： other something

    something

    something

    something

  • 當(dāng) n 為 -n+3(公式) 時(shí)： other something

    something

    something

    something

  • 當(dāng) n 為 2n(公式) 時(shí)： other something

    something

    something

    something

  • 當(dāng) n 為 2n+1(公式) 時(shí)： other something

    something

    something

    something

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

    something

    something

    something

  • 當(dāng) n 為 2(數(shù)字) 時(shí)： other something

    something

    something

    something

  • 當(dāng) n 為 n+3(公式) 時(shí)： other something

    something

    something

    something

  • 當(dāng) n 為 -n+3(公式) 時(shí)： other something

    something

    something

    something

  • 當(dāng) n 為 2n(公式) 時(shí)： other something

    something

    something

    something

  • 當(dāng) n 為 2n+1(公式) 時(shí)： other something

    something

    something

    something

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

?

若是文中有什么錯(cuò)誤，歡迎大家指正批評(píng)，愿與大家在問(wèn)題的交流之中共同進(jìn)步。愈激烈，愈深刻。

轉(zhuǎn)載于:https://www.cnblogs.com/anani/p/8614392.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。