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

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.

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 .

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 + "']"));
}}