recherche
Maisoninterface WebQuestions et réponses frontalesL'impair peut-il être utilisé en CSS ?

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??x-oss-process=image/resize,p_40" 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
css怎么隐藏元素但不占空间css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

css3如何实现鼠标点击图片放大css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3什么是自适应布局css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。

css3动画效果有变形吗css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

css3线性渐变可以实现三角形吗css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

css3怎么设置动画旋转速度css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

一文了解CSS3中的新特性 ::target-text 选择器一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器,聊聊该选择器的作用和使用方法,希望对大家有所帮助!

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

MinGW - GNU minimaliste pour Windows

MinGW - GNU minimaliste pour Windows

Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),