Wie kann ich Elemente in CSS nach Teil-ID-Wert auswählen?

Lesezeit: 2 Minuten

Benutzeravatar von Fernando Andrade
Fernando Andrade

Ich habe einige Elemente mit PHP generiert und würde gerne wissen, ob es möglich ist, ein Element mit einer unvollständigen ID auszuwählen, Beispiel:

<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>

Die Klasse ist an Gemeinsamkeiten gewöhnt, aber jetzt muss ich sie einzeln auswählen, kenne aber nicht den gesamten ID-Namen.

Kann ich so etwas verwenden wie:

#as_{ ... }
#bs_{ ... }

  • Mögliches Duplikat des CSS-Selektors (ID enthält einen Teil des Textes)

    – Tony L.

    19. August 2016 um 20:07 Uhr

Nicht mit ID-Selektoren, da diese vollständige ID-Namen erfordern, sondern mit Substring-Attributselektoren:

div[id^="as_"]
div[id^="bs_"]

Aber da deine Elemente eine haben class Wie auch immer, warum fügen Sie nicht jeder Gruppe von Elementen eine gemeinsame Klasse hinzu und wählen nach dieser Klasse aus, um die Sache einfacher zu machen? Sie sollten in der Lage sein, die Gruppierungsklasse mit PHP zu bestimmen, während Sie die IDs generieren.

  • Dies ist eine gute Möglichkeit, bestimmte Anzeigen zu blockieren, die Zufallszahlen für die Div-IDs verwenden.

    – PJ Brunet

    1. März 2017 um 22:08

  • Die Antwort impliziert dies, aber ich denke, dies sollte direkt erwähnt werden: [id^="as_"] Hat NICHT die gleiche Spezifität wie #as_1 Daher kann dieser Ansatz nicht zum Überschreiben von ID-basierten Stilen verwendet werden

    – mzrnsh

    3. Juni 2017 um 23:11

  • @mizurnix: Das stimmt.

    – BoltClock

    4. Juni 2017 um 3:14

Benutzeravatar von Francislainy Campos
Francislainy Campos

Ich bin mir nicht sicher, ob dies genau zu dieser Frage passt, aber wir verwenden CodeceptJs und dafür haben wir diese beiden äquivalenten Teile:

myLocator: {

// xpath: "//*[contains(@data-testid, 'drawer')]",
css: '[data-testid*="drawer"]',
},

Also verwenden data-testid*= für css anstelle von enthält für xpath, um mit einem Element abzugleichen, dessen Datentest-ID etwa so benannt ist drawer-{something_dynamic_appended}.

1454030cookie-checkWie kann ich Elemente in CSS nach Teil-ID-Wert auswählen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy