Maison > Article > interface Web > Comment ajouter des styles au li spécifié en CSS

Comment ajouter des styles au li spécifié en CSS

青灯夜游original: 2022-09-02 19:35:153936parcourir

4 méthodes : 1. Utilisez « :first-child » pour styliser le premier li, la syntaxe est « li:first-child{style code} » 2. Utilisez « :last-child » pour styliser le dernier li Ajouter ; style, syntaxe "li:last-child{style}" ; 3. Utilisez "li:nth-of-type(N){style code}" pour ajouter du style au Nième li ; (N){style code}" ajoute du style au Nième li.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

css sélectionne le li spécifié et ajoute du style

Méthode 1 : Utilisez : le sélecteur first-child pour ajouter du style au premier lifirst-child选择器给第1个li加样式

:first-child 选择器匹配其父元素中的第一个子元素。

<!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: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>

Comment ajouter des styles au li spécifié en CSS

方法2：使用:last-child选择器给最后1个li加样式

:last-child选择器用来匹配父元素中最后一个子元素。

li:last-child{
	background:pink;
}

Comment ajouter des styles au li spécifié en CSS

方法3：使用:nth-of-type()选择器给第N个li加样式

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素

li:nth-of-type(1){  /* 第1个li加样式 */
	background:red;
}
li:nth-of-type(2){  /* 第2个li加样式 */
	background:pink;
}
li:nth-of-type(3){  /* 第3个li加样式 */
	background:green;
}

Comment ajouter des styles au li spécifié en CSS

()内的参数可以是公式或关键字Odd（奇数）和 even（偶数）

n+2从第2个元素开始加样式。

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

Comment ajouter des styles au li spécifié en CSS

同理如果选中单数元素那么就是2n+1（或者使用odd）；如果是想选中双数元素，那么就应该写成2n+2（或者使用even）；

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

Comment ajouter des styles au li spécifié en CSS

方法4：使用:nth-child()选择器给第N个li加样式

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

li:nth-child(1){  /* 第1个li加样式 */
	background:red;
}
li:nth-child(3){  /* 第3个li加样式 */
	background:pink;
}
li:nth-child(5){  /* 第5个li加样式 */
	background:green;
}

Comment ajouter des styles au li spécifié en CSS

()

:first-child Le sélecteur correspond le premier élément enfant au sein de son élément parent. Comment ajouter des styles au li spécifié en CSS

li:nth-child(odd){ 
	background:red;
}
li:nth-child(2n+2){
background:pink;
}

Méthode 2 : utilisez le sélecteur :last-child pour styliser le dernier li

🎜🎜 : Le sélecteur de dernier enfant est utilisé pour faire correspondre le dernier élément enfant dans l'élément parent. 🎜rrreee🎜 Comment ajouter des styles au li spécifié en CSS

🎜🎜 🎜Méthode 3 : utilisez le sélecteur :nth-of-type() pour styliser le Nième li 🎜🎜🎜:nth-of-type(n) Le sélecteur correspond au type spécifique qui appartient au parent element Chaque élément du Nième élément enfant🎜rrreee🎜 Comment ajouter des styles au li spécifié en CSS

🎜🎜() Les paramètres à l'intérieur peuvent être des formules ou des mots-clés Impair (nombre impair) et pair (nombre pair) 🎜🎜n+2 commence à ajouter des styles à partir du 2ème élément. 🎜rrreee🎜

🎜🎜 De la même manière, si vous souhaitez sélectionner des éléments impairs, alors c'est 2n+1 (ou utilisez impair si vous souhaitez sélectionner des éléments pairs) ; , alors il doit être écrit comme 2n+2 (ou utiliser <code>even) ; image/921/880/521/166211785588304Comment ajouter des styles au li spécifié en CSS" title= "166211785588304Comment ajouter des styles au li spécifié en CSS" alt="Comment ajouter des styles au li spécifié en CSS"/>🎜🎜🎜Méthode 4 : Utilisez le sélecteur :nth-child() pour styliser le Nième li🎜🎜 🎜

:nth-child(n) correspond au Nième élément enfant qui appartient à son élément parent, quel que soit le type de l'élément. 🎜rrreee🎜<img src="https://img.php.cn/upload/image/903/160/705/166211795344420Comment%20ajouter%20des%20styles%20au%20li%20sp%C3%A9cifi%C3%A9%20en%20CSS" title="166211795344420Comment ajouter des styles au li spécifié en CSS" alt="Comment ajouter des styles au li spécifié en CSS">🎜🎜 Les paramètres dans <code>()

peuvent être des formules ou des mots-clés Impair (nombre impair) et pair (nombre pair)🎜rrreee🎜🎜🎜🎜 (Partage de vidéos d'apprentissage : 🎜front-end web🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3 选择器 li

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer le premier li sans style avec CSSArticle suivant：Comment créer le premier li sans style avec CSS

Articles Liés

Voir plus