Hoe label voor = “XYZ” selecteert in CSS?

HTML:

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

CSS:

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

Ik wens het label te selecteren op basis van de 'for'attribuut om lay-outwijzigingen te maken.

Antwoord 1, Autoriteit 100%

De selector zou label[for=email], dus in CSS:

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

… of in JavaScript met behulp van de DOM:

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

… of in JavaScript met jQuery:

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

Het is een attribuut selector . Merk op dat sommige browsers (versies van IE & LT; 8, bijvoorbeeld) mogelijk geen attribuut selectoren ondersteunen, maar meer recente. Om oudere browsers zoals IE6 en IE7 te ondersteunen, zou u een klasse (goed of een andere structurele manier) moeten gebruiken, helaas.

(ik neem aan dat de sjabloon {t _your_email}een veld invult met id="email". Zo niet, gebruik dan in plaats daarvan een klasse.)

Houd er rekening mee dat als de waarde van het kenmerk dat u selecteert niet voldoet aan de regels voor een CSS-identifier(als er bijvoorbeeld spaties of haakjes in staan, of begint met een cijfer, enz.), heb je aanhalingstekens nodig rond de waarde:

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

Ze kunnen enkele of dubbele aanhalingstekens zijn.

Antwoord 2

Als de inhoud een variabele is, moet u deze tussen aanhalingstekens plaatsen. Het werkte voor mij. Zoals dit:

itemSelected(id: nummer){
  console.log('label bevat', document.querySelector("label[for='" + id + "']"));
}

Antwoord 3

Als het labelonmiddellijkvolgt op een gespecificeerd input-element:

input#example + label { ... }
input:checked + label { ... }