Einführung in Arten von CSS-Selektoren
Arten von CSS-Selektoren werden verwendet, um den Inhalt auszuwählen, den wir stylen möchten. Es hilft bei der Auswahl von Elementen anhand ihrer Klasse, ID, Typ usw. Ein CSS-Selektor ist eine Komponente des CSS-Regelsatzes.
Arten von CSS-Selektoren
Es stehen uns 5 verschiedene CSS-Selektoren zur Verfügung. Wir werden uns die folgenden wichtigen CSS-Selektoren ansehen:
- CSS Universal Selector.
- CSS-Elementauswahl.
- CSS-ID-Auswahl.
- CSS Class Selector.
- CSS-Attributauswahl.
1. CSS Universal Selector
In einer HTML-Seite hängt der Inhalt von HTML-Tags ab. Ein Paar von Tags definiert ein bestimmtes Webseitenelement. Der universelle CSS-Selektor wählt alle Elemente auf einer Webseite aus.
Beispiel:
* (
color: blue;
font-size: 21px;
)
Diese beiden von geschweiften Klammern umgebenen Codezeilen wirken sich auf alle auf der HTML-Seite vorhandenen Elemente aus. Wir deklarieren einen universellen Selektor mit Hilfe eines Sterns am Anfang der geschweiften Klammer. Universal Selector kann zusammen mit den anderen Selektoren in Kombination verwendet werden.
2. CSS-Elementauswahl
CSS-Elementauswahl wird auch als Typauswahl bezeichnet. Die Elementauswahl in CSS versucht, mit den gleichnamigen HTML-Elementen übereinzustimmen. Daher ein Selektor von
- passt zu allen
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- CSS Interview Fragen
- SASS gegen SCSS
- Fragen im Vorstellungsgespräch bei SASS
- Beispiele für eine HTML-sortierte Liste
- Elemente, dh alle ungeordneten Listen in dieser HTML-Seite.
Schauen wir uns ein Beispiel für die Elementauswahl an.
ul (
border: solid 1px #ccc;
)
Um dies besser zu verstehen, sehen wir uns ein Beispiel für einen HTML-Code an, um den oben beschriebenen CSS-Code anzuwenden.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Demo-Text
In diesem Beispiel finden wir hauptsächlich drei Elemente, nämlich das
- Element, das Tag und ein anderes
- Element. Da unser CSS-Code für das gilt
- tag spezifisch werden die Änderungen in der Grenze nur für unsere gemacht
- Tags und nicht für die Tags. In der Regel gelten diese Änderungen nicht für den Inhalt der
- Tags auch, aber in einigen Szenarien können die Stile auf die inneren Elemente angewendet werden.
3. CSS ID Selector
Der CSS-ID-Selektor hilft dem Entwickler, die vom Entwickler erstellte ID an den Stilinhalt anzupassen. ID Selector wird mit Hilfe des Hash-Zeichens (#) vor dem vom Entwickler angegebenen ID-Namen verwendet. Der ID-Selektor stimmt mit jedem HTML-Element mit einem ID-Attribut überein, dessen Wert ohne das Hash-Zeichen mit dem des Selektors übereinstimmt.
Hier ist ein Beispiel:
#box (
width: 90px;
margin: 10px;
)
Dieser CSS-Code kann verwendet werden, um mit dem Element mit der ID 'box' übereinzustimmen, wie im folgenden Satz.
Hier ist der Tag nur ein Beispiel. Wir können das ID-Attribut für jedes HTML-Tag schreiben. Die ID-Auswahl stimmt mit dem ID-Attribut innerhalb des Elements überein und sucht nach dessen Stil. In unserem Beispiel gilt das Styling, solange ein Element das ID-Attribut 'box' enthält.
Der Wert der verwendeten ID soll eindeutig sein. Wenn dieselbe ID für zwei oder mehr Elemente verwendet wird, ist der Code technisch ungültig, aber das Styling des Elements bleibt weiterhin gültig. Daher wird in der Regel vermieden, dass dieselbe ID verwendet wird.
Es ist ziemlich schwierig, jedes Mal eine andere ID für jede HTML-Seite zu verwenden. ID-Selektoren in CSS sind nicht nur mit Problemen der Steifigkeit konfrontiert, sondern auch mit dem Problem der Spezifität.
4. CSS Class Selector
Der CSS-Klassenselektor ist einer der hilfreichsten Selektoren aller Selektoren. Es wird mit einem Punkt gefolgt vom Namen der Klasse deklariert. Dieser Klassenname wird vom Codierer definiert, wie dies beim ID-Selektor der Fall ist. Der Klassenselektor sucht nach jedem Element mit einem Attributwert mit demselben Namen wie der Klassenname ohne Punkt.
Beispiel:
.square (
margin: 20px;
width: 20px;
)
Dieser CSS-Code kann verwendet werden, um das Element mit dem Klassenquadrat wie im folgenden Satz abzugleichen.
Dieser Stil gilt auch für alle anderen HTML-Elemente mit einem Attributwert für die Klasse als "Quadrat". Ein Element mit demselben Klassenattributwert hilft uns bei der Wiederverwendung der Stile und vermeidet unnötige Wiederholungen. Darüber hinaus ist die Klassenauswahl von Vorteil, da einem bestimmten Element mehrere Klassen hinzugefügt werden können. Wir können dem Attribut mehr als eine Klasse hinzufügen, indem wir jede Klasse durch ein Leerzeichen trennen.
Beispiel:
Hier sind Quadrat, Fett und Form drei verschiedene Arten von Klassen.
5. CSS-Attributauswahl
Der Inhalt des CSS-Attribut-Selektors richtet sich nach dem Attribut und dem in eckigen Klammern angegebenen Attributwert. Vor der öffnenden eckigen Klammer dürfen keine Leerzeichen vorhanden sein.
input(type="text") (
background-color: #fff;
width: 100px;
)
Dieser CSS-Code entspricht dem folgenden HTML-Element.
Wenn sich der Wert des Attributs 'type' ändert, stimmt der Attributselektor nicht mit ihm überein. Zum Beispiel würde der Selektor nicht mit dem Attribut übereinstimmen, wenn der Wert von 'type' von 'text' in 'submit' geändert würde. Wenn der Attributselektor nur mit dem Attribut und keinem Attributwert deklariert ist, wird er mit allen HTML-Elementen mit dem Attribut "type" übereinstimmen, unabhängig davon, ob der Wert "text" oder "submit" ist.
Beispiel:
input(type) (
background-color: #fff;
width: 100px;
)
Wir können auch Attributselektoren ohne Angabe eines Wertes außerhalb der eckigen Klammern verwenden. Dies hilft uns, unabhängig vom Element nur auf das Attribut abzuzielen. In unserem Beispiel basiert das Targeting auf dem Attribut 'type', unabhängig vom Element 'input'. CSS-Selektoren helfen uns, unseren Code zu vereinfachen und ermöglichen es uns, denselben CSS-Code für verschiedene HTML-Elemente zu verwenden und wiederzuverwenden. Sie helfen uns bei der Gestaltung bestimmter Segmente und Teile unserer Webseite. Sie bieten uns die Möglichkeit, ähnliche Elemente auf unserer Webseite einheitlich zu gestalten. CSS-Selektoren sind daher ein wichtiger Teil der Lernkurve von CSS.
Empfohlene Artikel
Dies war ein Leitfaden für Arten von CSS-Selektoren. Hier haben wir die verschiedenen Arten von CSS-Selektoren mit Beispielen besprochen. Sie können auch unsere anderen Artikelvorschläge durchgehen, um mehr zu erfahren -