Wie gestalte ich bestimmte Beschriftungen mithilfe von Attributselektoren in CSS?

So formatieren Sie bestimmte Beschriftungen mit der Attributauswahl

Bei der Arbeit mit HTML-Formularen kann es vorkommen, dass Sie auf Situationen zurückgreifen müssen, in denen Sie eindeutige Stile anwenden müssen spezifische Beschriftungen basierend auf den zugehörigen Eingabeelementen. In CSS können Sie dies erreichen, indem Sie Attributselektoren verwenden.

Attributauswahl mit „für“-Attribut

In Ihrem Beispiel möchten Sie eine Beschriftung basierend auf dem auswählen Wert seines „for“-Attributs. So geht's:

label[for="email"] {
  /* Styles here will apply only to the label with the "for" attribute value set to "email" */
}

Dieser Selektor stimmt mit jedem Etikettenelement überein, das ein „for“-Attribut mit dem Wert „email“ hat. Anschließend können Sie benutzerdefinierte Stile innerhalb des Blocks anwenden.

Implementierungsbeispiele

• CSS:

  label[for="email"] {
    color: red;
  }

  Nach dem Login kopieren

• JavaScript über DOM:

  const emailLabel = document.querySelector("label[for=email]");
  emailLabel.style.color = "blue";

  Nach dem Login kopieren

• JavaScript über jQuery:

  $("label[for=email]").css("color", "green");

  Nach dem Login kopieren

Hinweis: Attributselektoren werden von modernen Browsern unterstützt. Beachten Sie jedoch Kompatibilitätsprobleme mit älteren Versionen von Internet Explorer. Erwägen Sie die Verwendung von Klassen- oder anderen Strukturmethoden für die Unterstützung älterer Browser.

Das obige ist der detaillierte Inhalt vonWie gestalte ich bestimmte Beschriftungen mithilfe von Attributselektoren in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!