Comment sélectionner des éléments en CSS lorsque vous ne connaissez qu'une partie de leur identifiant ?

Sélection d'éléments en CSS par valeur d'ID partielle

Dans le développement Web, il devient nécessaire de sélectionner des éléments avec des identifiants spécifiques à des fins de style ou de manipulation . Cependant, que se passe-t-il si vous ne connaissez qu'une partie de l'ID de l'élément ?

Le défi :

Considérez un scénario dans lequel vous avez des éléments générés dynamiquement avec PHP, en attribuant des ID uniques qui incluent un préfixe :

<code class="html"><div class="1" id="as_1">...</div>
<div class="2" id="bs_1">...</div>

<div class="1" id="as_2">...</div>
<div class="2" id="bs_2">...</div></code>

Vous devez sélectionner ces éléments individuellement sans connaître l'ID complet.

Limitations des sélecteurs d'ID :

• Les sélecteurs d'ID nécessitent une correspondance exacte pour sélectionner un élément.

• Tentative d'utilisation :

  <code class="css">#as_{ ... }
  #bs_{ ... }</code>

  Copier après la connexion

  Solution alternative : sélecteurs d'attributs de sous-chaîne :

Les sélecteurs d'ID ne conviennent pas à ce scénario, mais des sélecteurs d'attributs de sous-chaîne peuvent être utilisés :

<code class="css">div[id^="as_"]
div[id^="bs_"]</code>

• [id^="as_"] sélectionne tous les éléments dont l'ID commence par "as_".
• [id^="bs_"] sélectionne tous les éléments dont l'ID commence par "bs_".

Suggestion supplémentaire :

Si vos éléments ont déjà des attributs de classe, envisagez d'attribuer une classe commune à chaque groupe et de sélectionner plutôt en fonction de cette classe. Cela simplifie le processus et garantit que la sélection est indépendante de la méthode de génération d'ID utilisée en PHP.

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!