Maison > interface Web > tutoriel CSS > le corps du texte

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

Patricia Arquette
Libérer: 2024-10-30 04:33:28
original
177 Les gens l'ont consulté

How to Select Elements in CSS When You Only Know Part of Their ID?

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>
Copier après la connexion

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>
Copier après la connexion
  • [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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!