Wie wähle ich die Bezeichnung für = "XYZ" in CSS aus?

256

HTML:

<label for="email">{t _your_email}:</label>

CSS:

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}

Ich möchte die Beschriftung basierend auf dem Attribut 'für' auswählen, um Layoutänderungen vorzunehmen.

css css-selectors

— Kyle
quelle

496

Der Selektor wäre label[for=email]also in CSS:

label[for=email]
{
    /* ...definitions here... */
}

... oder in JavaScript mit dem DOM:

var element = document.querySelector("label[for=email]");

... oder in JavaScript mit jQuery:

var element = $("label[for=email]");

Es ist eine Attributauswahl . Beachten Sie, dass einige Browser (z. B. Versionen von IE <8) möglicherweise keine Attributselektoren unterstützen, neuere jedoch. Um ältere Browser wie IE6 und IE7 zu unterstützen, müssten Sie leider eine Klasse (naja oder eine andere strukturelle Methode) verwenden.

(Ich gehe davon aus, dass die Vorlage {t _your_email}ein Feld mit ausfüllt id="email". Wenn nicht, verwenden Sie stattdessen eine Klasse.)

Beachten Sie, dass Sie Anführungszeichen um das Attribut benötigen , wenn der Wert des von Ihnen ausgewählten Attributs nicht den Regeln für einen CSS-Bezeichner entspricht (z. B. wenn er Leerzeichen oder Klammern enthält oder mit einer Ziffer beginnt usw.) Wert:

label[for="field[]"]
{
    /* ...definitions here... */
}

Dies können einfache oder doppelte Anführungszeichen sein .

— TJ Crowder
quelle

Ich werde es dann unter Verwendung von Conditiona-Kommentaren in eine Klasse für IE7 ändern, danke für die großartige Antwort!

— Kyle

Und jetzt sagen die jQuery-Dokumente, dass Sie die Anführungszeichen für einzelne Wörter nicht benötigen, sodass sie (in dieser Hinsicht) wieder mit CSS übereinstimmen.

— TJ Crowder

Um Verwirrung bei allen zu vermeiden (ich hatte das gerade selbst), darf zwischen labelund[for=email]

— paddotk

IE8 unterstützt Attributselektoren, solange auf der Seite ein <! DOCTYPE> deklariert ist.

— Ilinamorato

@TJCrowder Ich verstehe. Ich habe den Punkt nur geklärt, als ich ihn gerade getestet habe.

— Ilinamorato

Wenn der Inhalt eine Variable ist, muss er mit Anführungszeichen verknüpft werden. Es hat bei mir funktioniert. So was:

itemSelected (id: number) {
    console.log ('label enthält', document.querySelector ("label [for = '" + id + "']"));
}}

— Julio Cesar Brito Gomes
quelle