Comment sélectionner la première instance d'un type d'élément spécifique dans un document entier à l'aide de CSS ?-tutoriel CSS-php.cn

Comment sélectionner la première instance d'un type d'élément spécifique dans un document entier à l'aide de CSS ?

Linda Hamilton

Libérer： 2024-12-08 22:52:12

original

683 Les gens l'ont consulté

How to Select the First Instance of a Specific Element Type in an Entire Document Using CSS?

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';

Copier après la connexion

p {
  background: red;
}

p.first-of-type {
  background: pink;
}

Copier après la connexion

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>

Copier après la connexion

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!