這篇文章給大家分享的是有關(guān)css中:nth-child(n)有什么作用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司是少有的成都網(wǎng)站建設(shè)、成都做網(wǎng)站、營銷型企業(yè)網(wǎng)站、成都微信小程序、手機APP,開發(fā)、制作、設(shè)計、外鏈、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,于2013年成立,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評

“:nth-child(n)”是css中的一個選擇器，作用是：匹配屬于其父元素的第N個子元素，不論元素的類型；其中，參數(shù)“n”可以是數(shù)字、關(guān)鍵詞或公式，例“:nth-child(3)”、“:nth-child(even)”。

本文操作環(huán)境：宏基S40-51、CSS3&&HTML5&&HBuilderX.3.0.5版、Windows10 家庭中文版

（學(xué)習(xí)視頻分享：css視頻教程）

在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素。nth-child(n)是css3中的一種選擇器。

:nth-child(n)選擇器用于匹配父元素索引為n的子元素，即選取屬于其父元素的第N個子元素，不論元素的類型。

說明：n可以是數(shù)字、關(guān)鍵詞（Odd 和 even）或公式。

示例1：當(dāng)n為數(shù)字

	
		
		
		
	
	
		
第一個段落。
		
第二個段落。
		
第三個段落。
		
第四個段落。

	

效果圖：

示例2：當(dāng)n為關(guān)鍵詞（Odd 和 even）

	
		
		
		
	
	
		
第一個段落。
		
第二個段落。
		
第三個段落。
		
第四個段落。
		
第五個段落。
		
第六個段落。
		
第七個段落。
		
第八個段落。
		
第九個段落。
		
第十個段落。
	

效果圖：

示例3：當(dāng)n為公式

	
		
		
		
	
	
		
第一個段落。
		
第二個段落。
		
第三個段落。
		
第四個段落。
		
第五個段落。
		
第六個段落。
		
第七個段落。
		
第八個段落。
		
第九個段落。
		
第十個段落。
	

效果圖：

使用公式 (an + b)。描述：表示周期的長度，n 是計數(shù)器（從 0 開始），b 是偏移值。

在這里，我們指定了下標(biāo)是 3 的倍數(shù)的所有 p 元素的背景色：

感謝各位的閱讀！關(guān)于“css中:nth-child(n)有什么作用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！