Comment puis-je styliser la première instance d'un type d'élément spécifique dans un document entier ?-tutoriel CSS-php.cn

Comment puis-je styliser la première instance d'un type d'élément spécifique dans un document entier ?

Susan Sarandon

Libérer： 2024-12-28 21:29:10

original

465 Les gens l'ont consulté

How Can I Style the First Instance of a Specific Element Type in an Entire Document?

Correspondance du premier élément d'un type spécifique dans l'ensemble du document

Problème :

Comment pouvez-vous appliquer le style :first-of-type au premier élément d'un type particulier n'importe où dans le document, quel que soit son parent element?

Limites CSS :

La pseudo-classe :first-of-type de CSS sélectionne uniquement le premier frère d'un type spécifique au sein de son élément parent, et non à travers l'élément parent. document entier.

JavaScript Solution :

:Ajout de classe de premier type :

Ajouter une classe "premier de type" au premier élément correspondant en utilisant la méthode querySelector() de JavaScript.
Appliquer un style aux éléments avec le "premier de type" classe.

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

<body>
  <section>
    <p>111</p>
    <p>222</p>
    <p>333</p>
  </section>
  <p>444</p>
  <p>555</p>
</body>

Copier après la connexion

Cette solution garantit que le premier paragraphe de l'ensemble du document, quel que soit son emplacement , reçoit le style "premier du type".

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!