Wie kann ich Elemente mit mehreren eindeutigen Bezeichnern mithilfe von Platzhaltern und CSS-Attributselektoren formatieren?

Elemente mit mehreren eindeutigen Bezeichnern mithilfe von Platzhaltern in CSS gestalten

In der Frontend-Entwicklung ist es häufig erforderlich, Elemente sowohl auf der Grundlage einer gemeinsamen Klasse als auch eindeutiger Bezeichner zu gestalten. Stellen Sie sich das folgende Szenario vor:

Wir haben mehrere Divs, die wir mithilfe der Klasse „.tocolor“ mit einem roten Hintergrund formatieren möchten. Allerdings müssen wir jedes Div auch eindeutig mit einer Zahl identifizieren (z. B. tocolor-1, tocolor-2, tocolor-3).

Anfangs haben wir versucht, Platzhalter zu verwenden, um das Styling zu vereinfachen, wie unten gezeigt:

.tocolor-* {
  background: red;
}

Diese Methode hat jedoch nicht funktioniert. Die Lösung für dieses Problem liegt in CSS-Attributselektoren. Indem wir auf das Klassenattribut eines Elements abzielen, können wir Elemente basierend auf bestimmten Mustern formatieren.

Attributselektoren für die Gestaltung mit Platzhaltern

Es gibt zwei Arten von Attributselektoren, die in diesem Szenario verwendet werden können:

• [attribute^="value"]: Entspricht Elementen, deren Attribut mit dem angegebenen beginnt Wert.
• [attribute*="value"]: Entspricht Elementen, deren Attribut den angegebenen Wert enthält.

Für die angegebene HTML-Struktur:

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

Wir können das folgende Attribut verwenden Selektoren:

div[class^="tocolor-"], div[class*=" tocolor-"] {
  background: red;
}

• [class^="tocolor-"]: Entspricht allen Divs, deren Klassenattribut mit „tocolor-“ beginnt.
• [class*=" tocolor-"]: Entspricht allen Divs, deren Klassenattribut die Teilzeichenfolge enthält „tocolor-“.

Verwendung und Demonstration

Durch die Verwendung dieser Attributselektoren können wir Elemente effektiv formatieren, die sowohl auf der gemeinsamen „.tocolor“-Klasse als auch auf eindeutigen Bezeichnern basieren, wie gezeigt in der folgenden Demo:

[Live Demo](http://jsfiddle.net/K3693/1/)

Ressourcen für weiteres Lernen

• CSS-Attributselektoren: https://developer.mozilla.org/en -US/docs/Web/CSS/Attribute_selectors
• MDN-Dokumente zu Attributselektoren: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente mit mehreren eindeutigen Bezeichnern mithilfe von Platzhaltern und CSS-Attributselektoren formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!