L'impair peut-il être utilisé en CSS ?-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2022-05-18 18:40:21

original

2775 Les gens l'ont consulté

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样式}

Copier après la connexion

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>

Copier après la connexion

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. png p: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🎜🎜

🎜 🎜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🎜 🎜

🎜🎜

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!