Comment sélectionner des éléments avec des identifiants partiels en CSS ?

Sélection de valeur d'ID partielle en CSS

Problème

Lorsque des éléments sont générés dynamiquement à l'aide de langages de programmation comme PHP, il peut devenir difficile de sélectionner des éléments spécifiques en utilisant des valeurs d'identification incomplètes. Cette situation se produit lorsque le nom complet de l'ID est inconnu, mais que seule une chaîne partielle est disponible pour l'identification.

Explication

Les sélecteurs d'ID en CSS nécessitent des noms d'ID complets pour fonctionner efficacement. Cependant, la nécessité de sélectionner des éléments sur la base de chaînes d'identification partielles a conduit à l'introduction de sélecteurs d'attributs de sous-chaînes. Cette solution permet une identification précise des éléments en fonction de modèles de chaînes spécifiques.

Solution

Pour sélectionner des éléments avec des valeurs d'ID partielles, utilisez des sélecteurs d'attributs de sous-chaîne au lieu de sélecteurs d'ID. La syntaxe de ces sélecteurs est la suivante :

[attribute^="string"]

où l'attribut représente l'attribut ID et la chaîne indique la chaîne partielle à comparer.

Dans votre cas, vous pouvez utiliser ce qui suit sélecteurs pour obtenir les résultats souhaités :

div[id^="as_"]

div[id^="bs_"]

Ces sélecteurs cibleraient tous les éléments dont les ID commencent respectivement par "as_" et "bs_".

Solution alternative

Au lieu d'utiliser des sélecteurs d'attributs de sous-chaîne d'ID partiel, vous pouvez également utiliser des attributs de classe s'ils sont disponibles. Chaque groupe d'éléments peut se voir attribuer une classe partagée, permettant une sélection d'éléments basée sur cette classe plutôt que sur des ID individuels. Cette méthode simplifie la sélection et peut être facilement réalisée grâce au code PHP utilisé pour générer les ID d'élément en premier lieu.

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!