css怎么排除第一個(gè)子元素

發(fā)布時(shí)間：2022-08-30 09:38:08 來(lái)源：億速云閱讀：223 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了css怎么排除第一個(gè)子元素的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇css怎么排除第一個(gè)子元素文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

4種方法：1、用“:not()”和“:first-child”，語(yǔ)法“元素:not(:first-child){樣式}”；2、用“:nth-of-type”，語(yǔ)法“元素:nth-of-type(n+2){樣式}”；3、用“:nth-child”，語(yǔ)法“元素:nth-child(n+2){樣式}”；4、用選擇符“+”或“~”，語(yǔ)法“元素+元素{樣式}”或“元素~元素{樣式}”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css排除第一個(gè)子元素的4種方法

方法1：使用選擇器:not()和:first-child

利用:first-child選取第一個(gè)元素
然后使用:not()匹配非第一個(gè)子元素的其他元素

示例：給除了第一個(gè)子元素的其他元素添加紅色背景

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.dom div {
				float: left;
				height: 150px;
				line-height: 150px;
				width: 150px;
				margin: 20px;
				background: #ccc;
				text-align: center;
				color: #fff;
			}
			.dom  div:not(:first-child){
			
			    background:red;
			
			}
		</style>
	</head>

	<body>
		<div class="dom">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>

</html>

css怎么排除第一個(gè)子元素

說(shuō)明:

:not(selector) 選擇器匹配非指定元素/選擇器的每個(gè)元素。
:first-child 選擇器用于選取屬于其父元素的首個(gè)子元素的指定選擇器。

方法2：使用:nth-of-type()

:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素.

n是從0開始的，那么n+2自然就是從第2個(gè)元素開始了。

.dom div:nth-of-type(n+2){
background:pink;
}

css怎么排除第一個(gè)子元素

同理如果選中單數(shù)元素那么就是2n+1；如果是想選中雙數(shù)元素，那么就應(yīng)該寫成2n+2;具體情況可以根據(jù)項(xiàng)目情況使用。

.dom div:nth-of-type(2n+1){
background:pink;
}
.dom div:nth-of-type(2n+2){
background:green;
}

css怎么排除第一個(gè)子元素

方法3：使用:nth-child()

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型。

方法3和方法2類型，設(shè)置()的值為“n+2”即可。

.dom div:nth-child(n+2){
background:green;
}

css怎么排除第一個(gè)子元素

方法4：使用兄弟選擇符+或者~

+ 選擇器：如果需要選擇緊接在另一個(gè)元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。
~ 選擇器：作用是查找某一個(gè)指定元素的后面的所有兄弟結(jié)點(diǎn)。

由于都是div元素，第一個(gè)元素沒(méi)有兄弟元素，所以就能獲取除第一個(gè)之外的子元素。

.dom div+div{
   background:red;
}

css怎么排除第一個(gè)子元素

.dom div+div{
   background:peru;
}

css怎么排除第一個(gè)子元素

關(guān)于“css怎么排除第一個(gè)子元素”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“css怎么排除第一個(gè)子元素”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

css怎么排除第一個(gè)子元素

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽