English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Manuel complet des sélecteurs CSS
Spécifiez le nth élément correspondant à chaque élément p dans le même type :2Couleur de fond des éléments frères au même niveau :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual de base(oldtoolbag.com)</title>
<style>
/* Paragraphe impair */
p:nth-of-type(2n+1) {
color: red;
}
/* Paragraphe pair */
p:nth-of-type(2n) {
color: blue;
}
/* Premier paragraphe */
p:nth-of-type(1) {
font-weight: bold;
}
/* Deuxième paragraphe */
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<div>Cette section ne participe pas au comptage.</div>
<p>C'est le premier paragraphe。</p>
<p>C'est le deuxième paragraphe。</p>
<div>Cette section ne participe pas au comptage.</div>
<p>C'est le troisième paragraphe。</p>
<p>C'est le quatrième paragraphe。</p>
</div>
</body>
</html>Voyons voir ‹/›:nth-of-type( <nth> ) where <nth> = <an-plus-b> | even | odd
:nth-of-Le sélecteur type(n) correspond au n-ième élément frère de même type.
n peut être un nombre, un mot-clé ou une formule.
Avis : Voir également :nth-child() sélecteur. Ce sélecteur correspond au n-ième élément enfant de l'élément parent. Regardez les :nth-child() 。
Les nombres dans le tableau indiquent la version du premier navigateur qui prend en charge cette propriété.
| sélecteur | |||||
|---|---|---|---|---|---|
| :nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Les nombres pairs et impairs peuvent être utilisés comme mots-clés pour correspondre aux éléments enfants, dont l'index est pair ou impair (le premier enfant de l'index)1)
Ici, nous spécifions deux couleurs de fond différentes pour les éléments p pairs et impairs :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual de base(oldtoolbag.com)</title>
<style>
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<p>C'est le premier paragraphe。</p>
<p>C'est le deuxième paragraphe。</p>
<p>C'est le troisième paragraphe。</p>
<p>C'est le quatrième paragraphe。</p>
</div>
</body>
</html>Voyons voir ‹/›Utilisez l'équation (an+ b）.Description : a représente une taille de boucle, N est un compteur (commençant à 0) et b est un décalage.
Ici, nous spécifions la couleur de fond pour tous les éléments3des éléments p de multiples spécifiés ont la couleur de fond :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual de base(oldtoolbag.com)</title>
<style>
p:nth-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>C'est un titre</h1>
<p>Le premier paragraphe。</p>
<p>Le deuxième paragraphe。</p>
<p>Le troisième paragraphe。</p>
<p>Le quatrième paragraphe。</p>
<p>Le cinquième paragraphe。</p>
<p>Le sixième paragraphe。</p>
<p>Le septième paragraphe。</p>
<p>Le huitième paragraphe。</p>
<p>Le neuvième paragraphe。</p>
<p><b>Attention :</b> Internet Explorer 8 et les versions plus anciennes des navigateurs ne supportent pas :nth-dernier-sélecteur child().</p>
</body>
</html>Voyons voir ‹/›