Sind Sie neu bei CSS? Dieser Artikel ist für Sie! Vielleicht der wichtigste Schlüssel zum Verständnis von CSS sind die Selektoren. Selektoren sind das, was es Ihnen ermöglicht, bestimmte HTML-Elemente anzusprechen und ihnen Stil zu verleihen. Denken wir jetzt aber nicht über Stil nach, konzentrieren wir uns einfach auf die Auswahl.
In den folgenden Beispielen wäre das CSS in einer Datei namens z. B. style.css, die von einem HTML-Dokument namens z. B. index.html referenziert wird. Es sind separate Dateien, was das Tolle an CSS ist – die Trennung von Design und Dokument.
So würde diese HTML-Datei aussehen
<!DOCTYPE html>
<html lang="en">
<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>Und die CSS-Datei würde nur die Selektorblöcke enthalten, wie Sie sie unten sehen werden.
ID-Selektor
#happy-cake {
}<!-- WILL match -->
<div id="happy-cake"></div>
<!-- WILL match -->
<aside id="happy-cake"></aside>
<!-- Will NOT match -->
<div id="sad-cake">Wrong ID!</div>
<!-- Will NOT match -->
<div class="happy-cake">That's not an ID!</div>Aufleveln
ID-Selektoren sind die mächtigste Art von Selektoren in Bezug auf CSS-Spezifität. Das bedeutet, dass sie andere Selektortypen übertrumpfen und die darin definierten Stile gewinnen. Das klingt gut, ist aber typischerweise als schlecht angesehen, da es gut ist, Selektoren mit niedrigerer Spezifität zu haben, die bei Bedarf leichter überschrieben werden können.
Klassen-Selektor
.module {
}<!-- WILL match -->
<div class="module"></div>
<!-- WILL match -->
<aside class="country module iceland"></aside>
<!-- Will NOT match -->
<div class=".module">The dot is for CSS, not HTML</div>
<!-- Will NOT match -->
<div class="bigmodule">Wrong class</div>Aufleveln
Klassen-Selektoren sind Ihr Freund. Sie sind wahrscheinlich die nützlichsten und vielseitigsten Selektoren, die es gibt. Zum Teil, weil sie in allen Browsern gut unterstützt werden. Zum Teil, weil Sie mehreren HTML-Elementen mehrere Klassen (einfach durch ein Leerzeichen getrennt) zuweisen können. Zum Teil, weil es JavaScript-Funktionen gibt, die Sie speziell zur Bearbeitung von Klassen nutzen können.
Tag-Selektor
h2 {
}<!-- WILL match -->
<h2>Hi, Mom</h2>
<main>
<div>
<!-- WILL match -->
<h2>Anywhere</h2>
</div>
</main>
<!-- Will NOT match -->
<div class="h2">Wrong tag, can't trick it</div>
<!-- Will NOT match -->
<h2class="yolo">Make sure that tag has a space after it!</h2>Aufleveln
Tag-Selektoren sind am nützlichsten, wenn sie Eigenschaften ändern, die für dieses HTML-Element einzigartig sind. Wie das Festlegen der list-style für ein <ul> oder tab-size für ein <pre>. Auch in Reset-Stylesheets, wo Sie versuchen, Stile, die Browser für bestimmte Elemente anwenden, zu deaktivieren.
Verlassen Sie sich jedoch nicht zu sehr darauf. Es ist typischerweise nützlicher, eine Klasse zu haben, die das Styling definiert, das Sie auf jedes HTML-Element anwenden können.
Attribut-Selektor
[data-modal="open"] {
}<!-- WILL match -->
<div data-modal="open"></div>
<!-- WILL match -->
<aside class='closed' data-modal='open'></aside>
<!-- Will NOT match -->
<div data-modal="false">Wrong value</div>
<!-- Will NOT match -->
<div data-modal>No value</div>
<!-- Will NOT match -->
<div data-modal-open>Wrong attribute</div>Aufleveln
Sie könnten argumentieren, dass Attribut-Selektoren sogar nützlicher sind als Klassen, da sie die gleiche Spezifität haben, aber jedes Attribut anstelle von nur class auswählen können, plus sie können einen Wert haben, nach dem Sie auswählen können.
Kaum noch ein Problem, aber Attribut-Selektoren werden in IE 6 nicht unterstützt.
Positions-Selektoren
:nth-child(2) {
}<ul>
<li>nope</li>
<!-- WILL match -->
<li>yep, I'm #2</li>
<li>nope</li>
</ul>Aufleveln
Es gibt mehrere verschiedene Positions-Selektoren neben :nth-child. Mit einfachen Ausdrücken (wie 3n = „jedes dritte“) können Sie Elemente basierend auf ihrer Position im HTML auswählen. Sie können hier mit dieser Idee spielen oder sich einige nützliche Rezepte ansehen.
Andere Pseudo-Selektoren
:empty {
}<!-- WILL match -->
<div></div>
<!-- WILL match -->
<aside data-blah><!-- nothin' --></aside>
<!-- Will NOT match -->
<div> </div>
<!-- Will NOT match -->
<div>
</div>Aufleveln
:empty ist einer von vielen Pseudo-Selektoren, die Sie an dem Doppelpunkt (:) erkennen können. Sie repräsentieren typischerweise etwas, das man nicht allein anhand des Elements und seiner Attribute erkennen konnte.
Beachten Sie, dass diese sich leicht von Pseudo-Elementen unterscheiden, die Sie an dem doppelten Doppelpunkt (::) erkennen können. Sie sind dafür verantwortlich, Dinge auf der Seite hinzuzufügen, basierend auf den Dingen, die sie auswählen.
Mehr zur Steigerung des Niveaus
Selektoren können miteinander kombiniert werden. Zum Beispiel
.module.news {
/* Selects elements with BOTH of those classes */
}
#site-footer::after {
/* Adds content after an element with that ID */
}
section[data-open] {
/* Selects only section elements if they have this attribute */
}Es gibt auch Selektor-Kombinatoren wie ~, + und >, die Selektoren beeinflussen, wie z.B.
.module > h2 {
/* Select h2 elements that are direct children of an element with that class */
}
h2 + p {
/* Select p elements that are directly following an h2 element */
}
li ~ li {
/* Select li elements that are siblings (and following) another li element. */
}Hier auf CSS-Tricks gibt es ein ganzes Handbuch, das alle CSS-Selektoren sowie Eigenschaften behandelt.
Sollte für „Attribut-Selektor“ nicht das CSS
[data-modal="true"]lauten stattdessen?Da war ein Tippfehler! Danke, dass Sie das bemerkt haben, Phan. Ich werde das hier verstecken, da es nicht mehr relevant ist.
Doppelter Doppelpunkt wird doch bei IE nicht erkannt, oder? Man muss die Syntax mit einem Doppelpunkt verwenden.
Das stimmt für IE 8, ja. Ich finde es schön, das Konzept mit der Unterscheidung zwischen Selektor und Element mit der unterschiedlichen Anzahl von Doppelpunkten darzustellen. Es ist immer schwierig in einem Anfängerartikel, was man behandeln und was man weglassen soll, um nicht zu überfordern.
Sehr gut geschrieben, Chris.
Sie sollten erwähnen, dass IDs nur einmal pro Seite verwendet werden dürfen, da viele Anfänger das nicht wissen :)
*die gleichen IDs
Seltsamerweise, während das absolut eine bewährte Methode ist, ist CSS egal das ziemlich egal.
warum sollte es? eine eindeutige ID zu haben, ist eine Einschränkung für HTML-Dokumente, nicht für CSS.
Das meinte ich. Ich weiß, dass CSS sich nicht darum kümmert und das ist alles in Ordnung.
Der Name der ID sollte in einem HTML-Dokument eindeutig sein.
Und das kann für Anfänger potenziell verwirrend sein.
Der Validator wirft einen Fehler, wenn Sie das auf derselben Seite haben. Aber es ist keine große Sache :)
Das meinte ich. Ich weiß, dass CSS sich nicht darum kümmert und das ist alles in Ordnung.
Der Name der ID sollte in einem HTML-Dokument eindeutig sein.
Und das kann für Anfänger potenziell verwirrend sein.
Der Validator wirft einen Fehler, wenn Sie das auf derselben Seite haben. Aber es ist keine große Sache :)
Verdammt, entschuldige das, Chris.
Ich meinte die ID happy-cake
CSS kümmert sich nicht um mehrere gleiche IDs, aber JavaScript kümmert sich (JavaScript fokussiert die letzte im Ablauf)
Deshalb sind mehrere gleiche IDs verboten.
Dieser :empty Selektor, wow… #mindblown
Ich habe dasselbe gedacht. Ich bin ziemlich gut mit Pseudo-Selektoren/Elementen, aber ich kannte diesen nicht einmal!
:empty ist großartig, aber seien Sie sich bewusst, dass Leerraum als Textknoten im DOM gerendert werden kann/sollte. Sobald ein Textelement in einem Element vorhanden ist, ist :empty für dieses Element falsch.
Dieses Verhalten unterscheidet sich beim letzten Mal, als ich es überprüft habe, zwischen den Browsern (vielleicht auch je nach Elementtyp).
Ich möchte mich nicht auf diesen Selektor verlassen, er ist beim Arbeiten mit dem HTML zu unsichtbar und ein zusätzlicher Zeilenumbruch ist leicht hinzugefügt.
Auch im Handbuch: https://css-tricks.de/almanac/selectors/e/empty/
Danke Chris, dass Sie einen Beitrag für Anfänger im CSS-Bereich erstellt haben… Ich unterrichte CSS und viele Konzepte in CSS, die einige Blogger als selbstverständlich ansehen, sind für Neulinge, die gerade mit CSS beginnen, völlig fremd… Beiträge wie diese helfen wirklich…
Danke für das Teilen Ihres Wissens…
Obwohl ich selbst kein CSS-Anfänger bin, ist dies ein solider Überblick über die Arbeit mit Selektoren. Ein guter Link, den ich an ein paar Leute weitergeben kann, die gerade lernen. Danke wie immer, Chris!
Ich teile es auch mit meinen neuen Studenten… Danke Chris
Kurz. Einfach :)
Das ist ein schönes „Spiel“, um zu üben: http://flukeout.github.io/ !
Sie müssen das wackelnde Element auswählen. Um zu beginnen, sind die ersten 3 Antworten, die Sie in das blinkende blaue Feld eingeben müssen:
plate
bento
plate#fancy
Viel Spaß, Anfänger!
Dies ist eine perfekte Darstellung meines großen „AHA“-Moments mit CSS. So seltsam es auch erscheinen mag, die Erkenntnis, dass „Selektor“ tatsächlich bedeutete, dass man etwas „auswählt“, war ein riesiger Schritt für mich, um zu verstehen, wie CSS funktioniert.
Na klar, wie sollte es sonst funktionieren?
Danke für den Artikel. Von den letzten drei Selektoren hatte ich keine Ahnung.
Danke, Chris. Das ist ein großartiger Artikel.
Danke, Chris. Was für ein nützlicher Artikel.
Sehr nützliche Informationen für Leute, die CSS lernen.
Danke, dass Sie alles an einem Ort zusammengefasst haben. Einige Tutorials, die ich mir angesehen habe, waren ziemlich kompliziert, und ich habe CSS-Tricks schon ein paar Mal besucht, um meinen Kopf wieder frei zu bekommen. Tatsächlich tauchte es schön in Google auf, sobald ich wusste, wie ich die Frage stellen sollte, sonst hätte ich Sie im Mai oder Juni nicht wiedergefunden.
Ehrlich gesagt, ich war immer zögerlich, diese speziellen Selektoren zu verwenden. Funktionieren sie in allen Browsern?
Was ist der Unterschied zwischen „.class:after“ und „.class::after“? Ein „:“ und zwei „::“? Warum?
TerryLee, „.class:after“ ist die alte CSS2-Syntax für Pseudo-Selektoren.
„.class::after“ ist die neue CSS3-Syntax. Und der Grund, warum es zwei „::“ hat, ist die klare Unterscheidung zwischen einer Pseudo-Klasse und einem Pseudo-Element.
Zum Beispiel ist „a:active“ eine Pseudo-Klasse, die den aktiven Zustand eines Ankers anspricht.
Stellen Sie sich vor, Sie verwenden „a:after“, um nach einem Anker etwas Inhalt hinzuzufügen. Das wäre für manche Leute einfach verwirrend. Und deshalb ist es besser, „a::after“ zu verwenden. Beachten Sie jedoch, dass IE8 immer noch die alte CSS2-Syntax mit nur einem „:“ verwendet.