Maison >interface Web >tutoriel CSS >Comment sélectionner la première instance d'un type d'élément spécifique dans un document entier à l'aide de CSS ?
Comment sélectionner la première instance d'un type d'élément spécifique dans un document entier à l'aide de CSS ?
- Linda Hamiltonoriginal
- 2024-12-08 22:52:12597parcourir
Faire correspondre le premier élément d'un type spécifique n'importe où dans le document
Question :
Comment pouvez-vous spécifier le premier instance d'un type d'élément particulier dans un document entier en utilisant CSS ?
Réponse :
Le CSS standard ne permet pas de faire correspondre le premier élément d'un type spécifique dans l'ensemble du document. En effet, la pseudo-classe :first-of-type s'applique uniquement aux éléments relatifs à leur parent au lieu de la racine du document.
Solutions JavaScript
Simulation :first-of-type
Vous pouvez approximer la fonctionnalité de :first-of-type avec JavaScript en utilisant la méthode querySelector(), qui récupère le premier élément correspondant du sélecteur spécifié. Voici un exemple :
document.querySelector('p').className += ' first-of-type';
p {
background: red;
}
p.first-of-type {
background: pink;
}
Ce code attribue la classe "first-of-type" au premier
élément dans le document, vous permettant de le styliser indépendamment :
<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>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!