Comment puis-je styliser la première occurrence d'un élément HTML spécifique dans l'ensemble du document ?

Faire correspondre le premier/énième élément d'un certain type dans l'ensemble du document

Problème :
Comment appliquer des styles CSS à la première occurrence d'un élément HTML spécifique, quel que soit son emplacement dans le document ?

Solution CSS :
Malheureusement, CSS seul ne peut pas y parvenir. La pseudo-classe :first-of-type s'applique uniquement aux éléments qui sont les premiers de leur type au sein de leur élément parent.

Solution JavaScript : querySelector()
À l'aide de JavaScript, nous pouvons exploiter la méthode querySelector() pour identifier et manipuler des éléments dans le document. Par exemple, pour styliser le premier élément p du document :

document.querySelector('p').className = 'first-of-type';<br>

Ce code ajoute la classe 'first-of-type' au premier élément p, qui peut ensuite être stylisé à l'aide du CSS suivant règles :

p.first-of-type {<br>fond : rose;<br>}<br>

Conclusion :
Bien que cela ne soit pas possible uniquement en CSS, l'utilisation de la méthode querySelector() de JavaScript fournit une solution flexible pour faire correspondre et styliser les premier/énième élément d'un type spécifique dans l'ensemble du document.

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!