Comment puis-je sélectionner des éléments CSS avec des ID contenant du texte spécifique ?

ID de ciblage de sélecteur CSS contenant un texte spécifique

Dans le développement Web, les éléments peuvent être identifiés avec des identifiants uniques, offrant un moyen de styliser et d'interagir avec eux spécifiquement. Cependant, lorsque les identifiants contiennent des parties dynamiques qui changent d'un élément à l'autre, l'accès à des éléments spécifiques basés sur un texte partiel peut être difficile.

Considérez le scénario dans lequel vous disposez de plusieurs éléments d'ancrage () avec des identifiants tels que "someGenerated Some : Same:0:name" et "someGenerated Some:Same:0:surname." Votre objectif est d'obtenir uniquement les éléments dont les identifiants contiennent le texte "name".

Une approche pourrait consister à utiliser le sélecteur d'attribut "[id*='Some:Same']", mais cela renverrait tous éléments dont les ID contiennent « Some : Same », quel que soit le texte de fin.

Au lieu de cela, vous pouvez utiliser un sélecteur plus précis :

a[id*='Some:Same'][id$='name']

Ce sélecteur affine efficacement le recherchez en vérifiant d'abord les éléments dont les ID contiennent "Some:Same" en utilisant la partie "[id*='Some:Same']". Il filtre ensuite davantage les résultats pour inclure uniquement les éléments dont les identifiants se terminent par « nom » en utilisant la partie « [id$='name'] ».

Ce sélecteur combiné garantit que seuls les éléments dont les identifiants contiennent « Certains : Idem" et se terminant par "nom" sont récupérés. Dans ce cas, il ciblerait avec succès les éléments avec les ID « someGenerated Some:Same:0:name » et « someGenerated Some:Same:1:name ».

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!