Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie wähle ich in CSS3 Elemente mit Klassennamen aus, die mit einer bestimmten Zeichenfolge beginnen?

Barbara Streisand
Freigeben: 2024-11-13 16:15:02
Original
135 Leute haben es durchsucht

How to Select Elements with Class Names Starting with a Specific String in CSS3?

Elemente mit Klassennamen abgleichen, beginnend mit einer bestimmten Zeichenfolge mithilfe von CSS3

Ist es möglich, mehrere Elemente basierend auf einem bestimmten Muster effizient auszuwählen? ihre Klassennamen mit CSS3? Betrachten Sie beispielsweise Elemente mit Klassennamen, die mit „myclass-“ beginnen.

Lösung:

In CSS3 gibt es zwei Ansätze, um dies zu erreichen:

1. Verwendung des Selektors [class^="myclass"]:

Dieser Selektor gleicht Elemente ab, deren Klassenattribut mit der angegebenen Zeichenfolge beginnt. Zum Beispiel:

div[class^="myclass"] {
  color: #f00;
}
Nach dem Login kopieren

2. Verwendung des Selektors [class*=" myclass"]:

Dieser Selektor gleicht Elemente ab, deren Klassenattribut die angegebene Zeichenfolge an einer beliebigen Stelle darin enthält. Zum Beispiel:

div[class*=" myclass"] {
  color: #f00;
}
Nach dem Login kopieren

Um es zusammenzufassen: Sie können jeden dieser Selektoren verwenden, um alle div-Elemente anzusprechen, deren Klassennamen mit „myclass-“ beginnen, und sie zu formatieren, indem Sie in diesem Fall beispielsweise ihre Farbe auf Rot setzen .

Das obige ist der detaillierte Inhalt vonWie wähle ich in CSS3 Elemente mit Klassennamen aus, die mit einer bestimmten Zeichenfolge beginnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage