CSS-Selektoren. Arten von Selektoren

, von denen jede Sie eine bestimmte Farbe festlegen möchten. Wie kann man es machen? Standard CSS – Selektoren sind nicht geeignet für Etiketten, sie die Parameter für alle Blöcke auf einmal anzuzeigen. Die Lösung ist einfach. Weisen Sie die Teilnehmer. Zum Beispiel erhielt die erste div class = 'rot', die zweite – class = 'blau', die dritte – class = 'grün'. Jetzt können sie CSS Tabellen ausgewählt werden.

Die Syntax ist folgende: Zeigt einen Punkt ( „“), gefolgt von dem Namen der Klasse zu schreiben. Um die erste Einheit zu verwalten, zu verwenden , um die Konstruktion .red. Zweitens – .blue und so weiter.

Wichtig! Es wird empfohlen , sinnvolle Werte der Klasse Attribut zu verwenden. Es ist schlechter Stil betrachtet Umschrift zu verwenden (zB krasiviy-blok) oder beliebige Kombinationen von Buchstaben / Zahlen (ojfh834871). In diesem Code sind Sie verpflichtet , zu verwirren, die Schwierigkeiten nicht zu erwähnen , dass diejenigen konfrontiert sein wird , die in dem Projekt , nachdem Sie beschäftigt werden. Die beste Option – zu verwenden , jede Methode, wie BEM.

Vorteile – relativ hohe Flexibilität.

Nachteile – die mehrere Elemente können ein und derselben Klasse sein, was bedeutet, dass sie gleichzeitig bearbeitet werden. Das Problem ist gelöst, die Methodik sowie Vererbung von Präprozessoren verwenden. Achten Sie darauf, Ihre Hände weniger, sass oder ein anderer Prä-Prozessor zu bekommen, sie erheblich die Arbeit vereinfachen.

ID-Selektor

Über diese Version Meinung Coder und Programmierer sind nicht eindeutig. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Einige CSS Tutorials empfehlen nicht die Verwendung von ID, weil in ungenauer Anwendung sie Probleme mit Vererbung verursachen können. Allerdings sind viele Experten aktiv sie im gesamten Layout anordnen. Sie entscheiden. # »), затем имя блока. Die Syntax ist folgende: das Pfundzeichen ( „#“), dann wird der Name des Blocks. #red. Zum Beispiel #red.

отличается от класса по нескольким параметрам. ID unterscheidet sich von der Klasse in mehrfacher Hinsicht. ID. Erstens kann die Seite nicht zwei identische ID sein. Sie werden einen eindeutigen Namen zugewiesen. Zweitens, wie ein Wähler hat eine höhere Priorität. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Das bedeutet , dass , wenn Sie eine Anteilklasse rot angeben und in CSS Tabellen rot geben Hintergrundfarbe, und dann zuweisen die gleiche ID blau und geben Sie die Farbe Blau, die Einheit blau.

Vorteile – kann das spezifische Element steuern, Stile von Tags und Klassen zu ignorieren.

ID и class. Nachteile – leicht, sich in einer großen Anzahl von ID und Klasse verloren.

Wichtig! ID вам, в общем-то, не нужны. Wenn Sie BEM – Methode verwenden (oder dessen Analoga), ID Sie in der Regel nicht benötigt werden . Diese Technik beinhaltet die Verwendung von Layout einzigartiger Klassen , die viel bequemer.

Universalselektor

{}. Syntax: Starlets Zeichen ( "*") und Klammern, also {*} …

Wird verwendet , um bestimmte Attribute einmal alle Elemente der Seite zuweisen. Wenn dies kann nützlich sein? box-sizing: border-box. Zum Beispiel, wenn Sie die Seite Eigenschaftenbox Verkleinerung festlegen möchten: border-box. div *{}. Kann nicht nur verwendet werden , um alle Komponenten des Dokuments zu verwalten, sondern auch alle Kinder des angegebenen Blocks zu steuern, beispielsweise div * {}.

Vorteile – können Sie eine große Anzahl von Elementen zu einem Zeitpunkt , steuern.

Nachteile – nicht flexibel genug , um Option. Außerdem verlangsamt die Verwendung dieser Wähler in einigen Fällen die Seite der Arbeit nach unten.

von Attributen

Machen Sie es möglich , das Element mit einem bestimmten Attribut zu steuern. Zum Beispiel haben Sie eine Reihe von Eingang – Tags mit einem anderen Attributtyp. Einer von ihnen – Text, das zweite – Passwort, die dritte – Nummer. Natürlich können Sie jede Klasse oder ID festgelegt, aber es ist nicht immer bequem. CSS – Selektoren von Attributen machen es möglich , Werte für bestimmte Tags mit höchster Präzision zu spezifizieren. Zum Beispiel wie folgt aus :

input [type = 'text'] {}

Dieser Selektor wählt alle Attribute mit dem Typ des eingegebenen Textes.

Das Tool ist sehr flexibel und kann mit jedem des Tags verwendet werden, in denen Attribute sein kann. Aber das ist nicht alles! Die CSS – Spezifikation hat die Fähigkeit , die Elemente zu steuern , mit noch mehr Komfort!

Stellen Sie sich vor , dass Ihre Seite Eingang mit dem Attribut Platzhalter hat = „Geben Sie einen Namen“ und geben Sie Platzhalter = „Passwort eingeben“. Sie können auch die Wähler ausgewählt werden! Um dies zu tun, verwenden Sie die folgende Struktur:

input [Platzhalter = "Geben Sie den Namen"] {} oder Eingabe [Platzhalter = "Passwort eingeben"]

Vielleicht flexiblere Arbeit mit Attributen. Angenommen , Sie haben eine Reihe von Tags mit ähnlichen Attributen Titel haben (zB „Caspian“ und „Caspian“). Um beide auszuwählen, verwenden Sie die folgende Auswahl:

[Title * = "Kaspiysk"]

CSS werden alle Elemente in dem Titel , von denen es Symbole der „Caspian“, dh. E., und „Caspian“ und „Caspian“ wählen.

Sie können auch Tags auswählen , die mit einem bestimmten Zeichen beginnen Attribute:

[Title ^ = "gewünschte Zeichen"] {}

oder beenden sie:

[Title $ = "right Zeichen"] {}.

Vorteile – maximale Flexibilität. Sie können alle vorhandenen Seitenelemente auswählen , ohne mit den Klassen durcheinander.

Nachteile – verwendet relativ selten, nur in bestimmten Fällen. Viele Web – Designer bevorzugen Methodik, da die Punktklasse ist einfacher , als zahlreiche zu arrangieren eckige Klammern und Zeichen „gleich“. Darüber hinaus funktionieren diese Wähler nicht in dem Internet Explorer – Versionen 7 und unten. Doch wer sind nun die alte Internet Explorer benötigen?

Pseudoklasse Selektoren

Bezeichnet ein Pseudozustandselement. Zum Beispiel ,: schweben – was zum Teil auf der Seite passiert , wenn Sie schweben ,: besucht – den besuchten Link. Es enthält auch Elemente wie: first-Kind und: liest-Kind.

Diese Art des Wählers aktiv in modernem Layout verwendet, denn dank es Ihnen eine Seite „live“ ohne die Verwendung von JavaScript machen können. Zum Beispiel wollen Sie sicherstellen , dass , wenn Sie die Schaltfläche schweben über mit der Klasse von BTN seine Farbe verändert. Dazu verwenden wir die folgende Struktur:

.btn: Hover {

background-color: red;

}

Schönheit in den grundlegenden Eigenschaften der Schaltfläche angegeben werden, der Übergang Eigenschaft, beispielsweise 0,5 s – in diesem Fall die Taste nicht sofort erröten, und innerhalb einer halben Sekunde.

Tugenden – sind für die „Wiederbelebung“ der Seiten weit verbreitet. Einfach zu bedienen.

Nachteile – sie sind es nicht. Dies ist ein wirklich praktisches Tool. unerfahrene Web-Designer können jedoch erhalten in der Fülle von Pseudo-Klassen verloren. Das Problem ist, Studium und Praxis gelöst.

pseudo-Selektoren

„Pseudo“ – das sind die Teile der Seite , die nicht in HTML ist, aber sie können immer noch verwaltet werden. Sie verstehen nicht? Es ist viel einfacher , als es scheint. Zum Beispiel wollen Sie die ersten Buchstaben in der Zeichenkette groß und rot machen, den anderen kleinen und schwarzen Text zu verlassen. Natürlich kann es diesen Brief in einer Spanne mit einer bestimmten Klasse geschlossen werden, aber es ist lang und langweilig. Es ist viel einfacher , den gesamten Absatz zu wählen und Pseudo verwendet :: first-letter. Es gibt die Möglichkeit , das Aussehen des ersten Buchstaben zu steuern.

Es gibt eine ziemlich große Anzahl von Pseudo-Elementen. Liste in einem einzigen Artikel wird nicht erfolgreich sein. Sie können die relevanten Informationen in Ihrer bevorzugten Suchmaschine finden.

Vorteile – bietet die Flexibilität , das Aussehen der Seite anpassen.

Nachteile – neu für sie sind oft verwirrt. Viele Auswahl dieser Art von Arbeit nur in bestimmten Browsern.

Zusammengefasst

Selector – ein leistungsfähiges Werkzeug für die Dokumentenflusskontrolle. Dank ihm, Sie jede einzelne Komponente der Seite auswählen können (es gibt auch nur teilweise). Achten Sie darauf , alle Möglichkeiten zu lernen, oder sogar schreiben Sie sie auf. Dies ist besonders wichtig , wenn Sie komplexe Seiten mit einem modernen Design und vielen interaktiven Elementen erstellen.