Maison >interface Web >Questions et réponses frontales >L'impair peut-il être utilisé en CSS ?

L'impair peut-il être utilisé en CSS ?

青灯夜游
青灯夜游original
2022-05-18 18:40:212823parcourir

odd peut être utilisé en CSS. En CSS, odd peut être utilisé comme mot-clé dans un sélecteur de pseudo-classe pour sélectionner un élément spécifié. Il est souvent utilisé comme paramètre du sélecteur ":nth-child()" pour sélectionner des éléments enfants spécifiés de lignes impaires. dans l'élément parent. La syntaxe "specify" Child element:nth-child(odd){//css style}".

L'impair peut-il être utilisé en CSS ?

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

odd peut être utilisé en CSS.

odd signifie "nombre impair". En CSS, vous pouvez sélectionner l'élément spécifié comme mot-clé dans le sélecteur de pseudo-classe.

odd est souvent utilisé en conjonction avec le sélecteur ":nth-child(n)" En tant que paramètre de ce sélecteur, il est utilisé pour sélectionner les éléments enfants spécifiés des lignes impaires dans l'élément parent

指定子元素:nth-child(odd){//css样式}

Explication. : Par rapport à impair, il en existe un autre. Le mot-clé pair (nombre pair), utilisé conjointement avec le sélecteur ":nth-child(n)", peut sélectionner les éléments enfants spécifiés des lignes paires dans l'élément parent

Exemple : réaliser le changement de couleur des lignes alternées du tableau

c'est-à-dire les lignes impaires. Une couleur, une couleur pour les lignes paires

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			tr:nth-of-type(even){
				background:red;
			}
			tr:nth-of-type(odd){
				background:pink;
			}
		</style>
	</head>
	<body>
		<table border="1">
			<tr>
				<th>商品</th>
				<th>价格</th>
			</tr>
			<tr>
				<td>T恤</td>
				<td>¥100</td>
			</tr>
			<tr>
				<td>牛仔褂</td>
				<td>¥250</td>
			</tr>
			<tr>
				<td>牛仔库</td>
				<td>¥150</td>
			</tr>
		</table>
	</body>
</html>

Limpair peut-il être utilisé en CSS ?

Connaissances approfondies :

:nth-child(n)Le sélecteur correspond au nième élément enfant dans l'élément parent. Le paramètre est l'index de l'élément. L'index commence à 1. :nth-child(n)选择器匹配父元素中的第n个子元素。参数是元素的索引。索引从1开始。

  • n 可以是一个数字,一个关键字,或者一个公式。

:nth-child 是 CSS3 提供的一个好用的选择器,因为在项目中经常用到,所以简单总结了它的常用方法,下面示例代码截图用的是同一个例子,p元素的父元素都是body

p:nth-child(2)

表示给第2个p元素添加背景色,p:nth-child(3)是第3个p元素,以此类推

Limpair peut-il être utilisé en CSS ?

p:nth-child(2)

承接上面的示例,如果这里的p元素前面还有其它元素,结果如下图,段落1被添加背景色,而不是上面示例的段落2被添加背景色,

因为这里的p:nth-child(1)为h1元素,,所以p:nth-child(2)才为p元素

Limpair peut-il être utilisé en CSS ?

p:nth-child(3n)

表示给3的倍数的p元素添加背景色,2n就是2的倍数,4n就是4的倍数,以此类推

Limpair peut-il être utilisé en CSS ?

p:nth-child(odd)

表示给所有奇数p元素添加背景色

Limpair peut-il être utilisé en CSS ?

p:nth-child(even)

表示给所有偶数p元素添加背景色

Limpair peut-il être utilisé en CSS ?

使用公式 (an + b),描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值

另外需要特别注意的是,an 必须写在 b 的前面,不能写成 b+an 的形式

注:公式里的n,不区分大小写

Limpair peut-il être utilisé en CSS ?

p:nth-child(2n+1)

可以简单理解为等同于 p:nth-child(odd)

Limpair peut-il être utilisé en CSS ?

p:nth-child(2n+0)

可以简单理解为等同于 p:nth-child(even)

Limpair peut-il être utilisé en CSS ?

p:nth-child(n+2)

表示正向范围,从第2个p元素开始(包括第2个p元素)到最后一个p元素都添加背景色(这里范围指2-5)

Limpair peut-il être utilisé en CSS ?

p:nth-child(-n+5)

  • n peut être un nombre, un mot-clé ou une formule.

:nth-child est un sélecteur utile fourni par CSS3. Parce qu'il est souvent utilisé dans les projets, ses méthodes courantes sont brièvement résumées. L'exemple de capture d'écran ci-dessous utilise le même sélecteur. les éléments parents de l'élément p sont tous body

Limpair peut-il être utilisé en CSS ?p:nth-child(2)

signifie ajouter une couleur d'arrière-plan au deuxième élément p, p:nth-child(3) est le troisième élément p, et ainsi de suite 1. pngp:nth-child(2)

🎜 En suivant l'exemple ci-dessus, s'il y a d'autres éléments devant l'élément p ici, le résultat sera comme indiqué ci-dessous, paragraphe 1 aura une couleur d'arrière-plan ajoutée, au lieu que la couleur d'arrière-plan soit ajoutée au paragraphe 2 dans l'exemple ci-dessus, 🎜🎜Parce que p:nth-child(1) voici un élément h1, donc p:nth-child(2) est un élément p🎜🎜Limpair peut-il être utilisé en CSS ?🎜 🎜p:nth -child(3n)🎜🎜 signifie ajouter une couleur d'arrière-plan à p éléments qui sont des multiples de 3. 2n est un multiple de 2, 4n est un multiple de 4, et ainsi de suite🎜 🎜Limpair peut-il être utilisé en CSS ?🎜🎜p:nth-child(odd) code>🎜🎜 signifie ajouter une couleur d'arrière-plan à tous les éléments p impairs🎜🎜<img src="https://img.php.cn/upload/image/914/548/%20708/165287025056756Limpair%20peut-il%20%C3%AAtre%20utilis%C3%A9%20en%20CSS%C2%A0?" title="165287025056756Limpair peut-il être utilisé en CSS ? " alt="Limpair peut-il être utilisé en CSS ?">🎜🎜<code>p:nth-child(even)🎜🎜 signifie ajouter une couleur d'arrière-plan à tous les p éléments🎜🎜Limpair peut-il être utilisé en CSS ?🎜🎜 Utilisez la formule (an + b), description : Représente la durée de la période, n est le compteur (à partir de 0), b est la valeur du décalage🎜🎜De plus, une attention particulière doit être portée au fait que an doit être écrit en devant b, et ne peut pas être écrit sous la forme b+an🎜🎜Remarque : n dans la formule n'est pas sensible à la casse🎜🎜Limpair peut-il être utilisé en CSS ? 🎜🎜p:nth-child(2n+1)🎜🎜 peut être simplement compris comme équivalent à p:nth-child(odd)🎜🎜Limpair peut-il être utilisé en CSS ?🎜🎜p:nth-child(2n+0)🎜🎜 peut être simplement compris comme équivalent à p:nth-child(even)🎜🎜Limpair peut-il être utilisé en CSS ?🎜🎜p:nth-child (n+2)🎜🎜 représente la plage avant, à partir du 2ème élément p (y compris le 2ème élément p) 2 éléments p) jusqu'au dernier élément p, ajoutez une couleur d'arrière-plan (la plage fait ici référence à 2- 5)🎜🎜Limpair peut-il être utilisé en CSS ?🎜 🎜p:nth-child(-n+5)🎜🎜 représente la plage négative, à partir du dernier p Ajoutez une couleur de fond aux éléments (y compris le dernier élément) au premier p élément (le la plage ici fait référence à 5-1)🎜🎜🎜🎜🎜 (Partage de vidéos d'apprentissage : 🎜tutoriel vidéo CSS🎜, 🎜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!

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