Klassenauswahl (CSS -Selektor)

syntax

.className {
declaration block
}

Beschreibung

Die Auswahl von Elementen auf der Grundlage ihrer Klassennamen ist eine sehr häufige Technik in CSS. Die Attributauswahlsyntax [Klasse ~ = "Warnung"] ist ziemlich umständlich, aber zum Glück gibt es eine einfachere und kürzere Form dafür: den Klassenauswahl. Hier ist ein einfaches Beispiel, das alle Elemente mit einem Klassenattribut auswählt, das den Wert „Warnung“ enthält:

.warning {
  ⋮ <span>declarations
</span>}

Dieses Beispiel zeigt auch die Verwendung eines implizierten universellen Selektors - es entspricht *.warning. Beachten Sie, dass Whitespace -Zeichen nicht nach dem Zeitraum oder zwischen einem Elementtyp -Selektor oder einem expliziten Universal -Selektor und der Periode erscheinen können. Beispielsweise entspricht der folgende Selektor alle P -Elemente mit einem Klassenattribut, das den Wert „Warnung“ enthält „:

p.warning {
  ⋮ <span>declarations
</span>}

Ein einfacher Selektor kann mehr als einen Attributauswahl- und/oder Klassen -Selektor enthalten. In solchen Fällen entspricht das Selektormuster Elementen, deren Attribute alle die angegebenen Komponenten enthalten. Hier ist ein Beispiel:

div.foo.bar {
  ⋮ <span>declarations
</span>}
div.foo.bar[title^="Help"] {
  ⋮ <span>declarations
</span>}

Der erste Beispiel -Selektor über enthält Divelemente, deren Klassenattributwert sowohl die Wörter "Foo" als auch "Bar" enthält. Der zweite Beispiel für den Beispiel entspricht Divisionselemente, deren Klassenattributwerte beide die Wörter "foo" enthält und "Bar", und deren Titelattributwerte beginnen mit der Zeichenfolge "Hilfe". Um die HTML, die mit den oben genannten CSS -Selektoren übereinstimmt, zu klären, könnte dies wie folgt sein:

<div >Matches first example</div>
<div  title="Help">Matches second example</div>

Beispiel

Der folgende Selektor enthält alle P -Elemente mit einem Klassenattribut, das den Wert "Intro" enthält:

p.intro {
  ⋮ <span>declarations
</span>}

häufig gestellte Fragen zu CSS -Klassen -Selektoren

Welche Bedeutung hat eine CSS -Klassenauswahl? Es spielt eine entscheidende Rolle in der Webentwicklung, da Entwickler denselben Stil auf mehrere HTML -Elemente anwenden können. Dies gewährleistet nicht nur die Konsistenz im Design, sondern spart auch Zeit, da Entwickler nicht wiederholt denselben Code schreiben müssen. Die Klassenauswahl werden mit einem Zeitraum definiert, gefolgt vom Klassennamen. Zum Beispiel .intro {Farbe: blau;}. In diesem Fall ist 'Intro' der Klassenwählte. Nennen Sie das HTML -Element mit dem Attribut "Klasse". Wenn Sie beispielsweise einen Klassenwählers mit dem Namen "Intro" in Ihrer CSS -Datei haben, können Sie ihn in HTML wie folgt auf einen Absatz anwenden:

Dies ist ein Einführungsabsatz.

. Der in der Intro -Klasse definierte Stil wird auf diesen Absatz angewendet.

Kann ich mehrere Klasse -Selektoren für ein einzelnes HTML -Element verwenden? Sie müssen nur jeden Klassennamen mit einem Speicherplatz innerhalb des Attributs "Klasse" in HTML trennen. Zum Beispiel

ist dies ein hervorgehobener Einführungsabsatz.

. In diesem Fall werden die Stile sowohl in den Klassen "Intro" als auch in "Highlight" auf den Absatz angewendet.

Was ist der Unterschied zwischen Klassenauswahlern und ID -Selektoren in CSS? Während ein Klassenauswahl verwendet werden kann, um mehrere HTML -Elemente zu stylen, wird ein ID -Selektor verwendet, um ein einzelnes eindeutiges Element zu stylen. Außerdem werden Klassenauswahlern mit einem Zeitraum (.) Vor dem Klassennamen definiert, während ID -Selektoren mit einem Hash (#) vor dem ID -Namen definiert werden. 🎜>

Ja, CSS -Klassenauswahler können mit anderen Selektoren kombiniert werden, um bestimmte Elemente zu zielen. Beispielsweise können Sie einen Klassenwählers mit einem Element -Selektor verwenden, um einen bestimmten Elementtyp innerhalb einer Klasse zu stylen. Zum Beispiel wird P.intro {color: blau;} den Stil nur auf Absatzelemente in der 'Intro' -Klasse anwenden. 🎜> Wenn in Ihren CSS -Klasse -Selektoren widersprüchliche Stile vorhanden sind, folgt der Browser die CSS -Spezifitäts- und Erbschaftsregeln, um den Konflikt zu lösen. Im Allgemeinen wird der später in der CSS -Datei definierte Stil die frühere überschreiben. Spezifische Selektoren haben jedoch eine höhere Priorität. Datei oder Verwendung spezifischerer Selektoren. Eine andere Möglichkeit besteht darin, die „wichtige“ Regel zu verwenden. Wenn Sie nach einem Stil „! Wichtig“ hinzufügen, können Sie ihm höhere Priorität geben. Verwenden Sie diese Regel jedoch sparsam, da dies Ihre CSS schwierig zu verwalten kann. Elemente. Mit der Methode "Document.GetElementsByClassName ()" können Sie Elemente mit einem bestimmten Klassennamen auswählen. Anschließend können Sie ihre Stile, Inhalte oder Attribute mit verschiedenen JavaScript -Methoden ändern. Selektoren, es ist eine gute Praxis, beschreibende und prägnante Namen zu verwenden. Außerdem sind Klassennamen Fallempfindlichkeit und sollten nicht mit einer Nummer beginnen. Sie können Bindestriche (-) oder Unterstriche (_) verwenden, um Wörter in einem Klassennamen zu trennen.

Kann ich CSS -Klasse -Selektoren in reaktionsschnellem Design verwenden? Durch die Kombination von Klassenauswahlern mit Medienabfragen können Sie ein reaktionsschnelles Layout erstellen, das sich an verschiedene Betrachtungsumgebungen anpasst.

Das obige ist der detaillierte Inhalt vonKlassenauswahl (CSS -Selektor). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!