中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css怎么讓第一個li不加樣式

發布時間:2022-09-05 09:52:48 來源:億速云 閱讀:304 作者:iii 欄目:web開發

本篇內容介紹了“css怎么讓第一個li不加樣式”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!

在css中,讓第一個li不加樣式,就是排除第一個li,給其他li元素加樣式。3種方法:1、用“:not()”和“:first-child”,語法“元素:not(:first-child){樣式}”;2、用“:nth-of-type”,語法“元素:nth-of-type(n+2){樣式}”;3、用“:nth-child”,語法“元素:nth-child(n+2){樣式}”。

本教程操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

讓第一個li不加樣式,就是給除了第一個li以外的其他li加樣式。

3種實現方法

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

  • 利用:first-child選取第一個元素

  • 然后使用:not()匹配非第一個子元素的其他元素

示例:讓第一個li不加紅色背景樣式,給除了第一個li元素的其他li元素添加紅色背景

<!DOCTYPE html>
<html>

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

	<body>
		<ul class="dom">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>

</html>

css怎么讓第一個li不加樣式

說明:

  • :not(selector) 選擇器匹配非指定元素/選擇器的每個元素。

  • :first-child 選擇器用于選取屬于其父元素的首個子元素的指定選擇器。

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

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

n是從0開始的,那么n+2自然就是從第2個元素開始了。

li:nth-of-type(n+2){
background:pink;
}

css怎么讓第一個li不加樣式

同理如果選中單數元素那么就是2n+1;如果是想選中雙數元素,那么就應該寫成2n+2;具體情況可以根據項目情況使用。

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

css怎么讓第一個li不加樣式

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

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

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

li:nth-child(n+2){
background:green;
}

css怎么讓第一個li不加樣式

同樣如果選中單數元素那么就是2n+1;如果是想選中雙數元素,那么就應該寫成2n+2;具體情況可以根據項目情況使用。

li:nth-child(2n+1){
	background:green;
}
li:nth-child(2n+2){
	background:pink;
}

css怎么讓第一個li不加樣式

“css怎么讓第一個li不加樣式”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

汕尾市| 彭州市| 合水县| 汉寿县| 会泽县| 繁昌县| 闻喜县| 文水县| 仁布县| 安义县| 乌兰浩特市| 老河口市| 闻喜县| 雷山县| 灌云县| 玉龙| 吉安市| 剑阁县| 庄浪县| 尉氏县| 息烽县| 辛集市| 高碑店市| 荣成市| 英山县| 巴东县| 纳雍县| 乐业县| 永福县| 巩义市| 三门县| 新竹县| 临沭县| 双城市| 阜平县| 内江市| 溧水县| 安龙县| 牡丹江市| 东乡族自治县| 承德县|