Guten Abend liebe Kolleginnen und Kollegen, heute werden wir noch zwei weitere studieren Wähler die aufgerufen werden untergeordnete und angrenzende CSS-Selektoren. In größerem Umfang können Sie darauf verzichten, für Ihre Entwicklung müssen sie jedoch erlernt und manchmal auch angewendet werden, damit sie im Gedächtnis bleiben. Lassen Sie uns daher besprechen, was Selektoren welche benachbart sind und welche Kinder sind und wir analysieren sie anhand eines Beispiels.
Untergeordnete CSS-Selektoren- Elemente, die sich im Inneren befinden übergeordnetes Element. Ein Beispiel hierfür könnte wie folgt aussehen. Wir haben einen Block, der einen Absatz, einen weiteren Block und ein Bild enthält. Diese drei Elemente sind die Kinder. Wenn der untergeordnete Block auch andere Elemente enthält, sind diese nicht mehr untergeordnete Elemente des ersten Blocks, sondern untergeordnete Elemente des Blocks, in dem sie sich direkt befinden. Ich hoffe, Sie verstehen, worum es geht.
Benachbart CSS-Selektoren
- Elemente, die im Dokumentcode nacheinander angeordnet sind. Ein Beispiel hierfür ist dieses. Wir haben einen Absatz und ein folgendes Tag Spanne. Alles ist ganz klar und wir müssen uns das Ganze nur anhand realer Beispiele ansehen.
Text im Absatz
Text in span
Kein untergeordneter Text mehr im Absatz
Mithilfe von Stilen fügen wir das gleiche Ergebnis für das Tag hinzu Spanne
Abt >spanne (
Schriftgröße: 200 %;
}
P +spanne(
Farbe Rot;
}
Das Ergebnis der Codeausführung wird in beiden Fällen auf das Tag angewendet Spanne, weil es ein untergeordnetes Element des Tags ist div und als nächstes nach dem Tag P. Daher wurde die Schrift doppelt so groß und rot. Jetzt haben wir uns komplett damit beschäftigt untergeordnete und benachbarte Selektoren in CSS, und alles, was Sie tun müssen, ist, Ihr Wissen in der Praxis zu vertiefen, bis bald!
Die CSS-Syntax ist einfach und Sie benötigen keinen Doktortitel in IT, um sie zu verstehen. Allerdings ist es eine der wenigen populären Sprachen, die im wahrsten Sinne des Wortes nicht logisch ist. Im Gegensatz zu anderen Web-Programmiersprachen wie JavaScript und PHP löst CSS Probleme nicht mit einfacher Logik. Algorithmen wie „Wenn X, dann mache Y, sonst mache Z“ oder „Wähle alle Y aus, dann mache X damit“ können in einer Sprache wie CSS nicht implementiert werden. Einfach ausgedrückt ist es eine Sprache für Design, eine Sprache für Designer, nicht für Entwickler. Einige der erfahrenen Programmierer, mit denen ich zusammengearbeitet habe, geben sich aus genau diesem Grund große Mühe, CSS zu beherrschen.
Das Erlernen von CSS beginnt mit Klassen und IDs sowie der Verwendung. und #, um Elemente direkt zu bezeichnen. Das reicht aus, um eine voll funktionsfähige Website zu erstellen, ist aber im Falle einer kompletten Neugestaltung nicht flexibel genug. Werfen wir einen Blick auf einen alternativen Ansatz zur Verwaltung dieser schwer zugänglichen Elemente.
Benachbarter verwandter Kombinator
Beginnen wir mit einem Selektor, der in schwierigen Situationen nützlich ist – mit einem benachbarten verwandten Kombinator. Ein benachbarter verwandter Kombinator wird durch die Verbindung zweier Elemente mit einem +-Zeichen gekennzeichnet:H1+S
Dadurch wird das nächste p-Element ausgewählt, das sich unmittelbar nach dem h1-Element im DOM befindet. Die typografische Theorie legt nahe, dass wir Textabsätze einrücken sollten, aber nur, wenn sie auf einen anderen Absatz folgen. In der Praxis kann dies verwendet werden, um alle Absätze außer dem ersten einzurücken:
p + p ( text-indent: 1em; )
Dies ist viel praktischer, als den ersten Absatz mit class="first" hervorzuheben. Drei Zeilen, keine Klassen und volle Browserunterstützung. Wenn Sie inhaltsbezogene IMG-Tags in P-Tags einfügen (wie es sein sollte), können Sie deren linken Ränder einfach mit einem negativen -1em-Wert nach hinten verschieben:
p + p img ( margin-left: -1em; )
Ziemlich einfach, oder? Was wäre, wenn wir die erste Zeile aller Absätze direkt nach den Überschriften hervorheben wollten, ohne alle anderen Absätze zu ändern? Auch hier können wir die View-Klasse verwenden. Ein einfacher Selektor aus einem benachbarten zusammengesetzten Kombinator und einem Pseudoelement reicht aus:
h1 + p::first-line ( Schriftartvariante: Kapitälchen; )
Hinweis: Das Pseudoelement :first-line wurde in CSS 2.1 übernommen, CSS 3 verwendet die Notation::, um zwischen Pseudoklassen und Pseudoelementen zu unterscheiden.
Erblicher Kombinator
Das übliche Markup-Protokoll besteht darin, Abschnitte innerhalb eines benannten Elements in einer #page oder #wrap einzufügen:Vlad Merzhevich
Webseitenelemente werden als Nachbarn bezeichnet, wenn sie im Code des Dokuments direkt aufeinander folgen. Schauen wir uns einige Beispiele für Elementbeziehungen an.
Lorem ipsum Schmerz setz dich.
In diesem Beispiel das Tag ist ein untergeordnetes Element des Tags
Weil es sich in diesem Behälter befindet. Jeweils
Fungiert als Elternteil .
Lorem ipsum Schmerz sitzen amet.
Hier sind die Tags Und sich in keiner Weise überschneiden und darstellen benachbarte Elemente. Die Tatsache, dass sie sich im Inneren des Behälters befinden Beeinflusst ihre Einstellung überhaupt nicht. Lorem ipsum Schmerz, Sit Amet, consectetuer Adipiszieren Elite.
Benachbarte Tags sind hier Und , und auch Und . Dabei Und angrenzende Elemente gelten nicht, da sich zwischen ihnen ein Container befindet .
Um den Stil benachbarter Elemente zu steuern, wird ein Pluszeichen (+) verwendet, das zwischen zwei Selektoren platziert wird. Die allgemeine Syntax ist wie folgt.
Selektor 1 + Selektor 2 (Beschreibung der Stilregeln)
Die Leerzeichen um das Pluszeichen sind optional; der Stil in dieser Notation wird auf Selektor 2 angewendet, jedoch nur, wenn er an Selektor 1 angrenzt und diesem unmittelbar folgt.
Beispiel 11.1 zeigt die Struktur, wie Tags miteinander interagieren.
Beispiel 11.1. Verwendung benachbarter Selektoren
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum Schmerz, Sit Amet, consectetuer adipisierende Elite.
Lorem ipsum dolor sit amet, consectetuer adipisierende Elite.
Das Ergebnis des Beispiels ist in Abb. dargestellt. 11.1.
Reis. 11.1. Markieren Sie Text mithilfe benachbarter Selektoren farblich
In diesem Beispiel wird die Textfarbe für den Inhalt des Containers geändert wenn es direkt nach dem Container platziert wird . Im ersten Absatz wird diese Situation umgesetzt, sodass das Wort „consectetuer“ im Browser rot angezeigt wird. Im zweiten Absatz gibt es zwar ein Tag , aber kein Schild nebenan Nein, der Stil wird also nicht auf diesen Container angewendet.
Nehmen wir ein praktischeres Beispiel. Oft ist es notwendig, in den Text eines Artikels verschiedene Fußnoten und Anmerkungen einzufügen. Typischerweise wird zu diesem Zweck eine neue Stilklasse erstellt und auf den Absatz angewendet; auf diese Weise können Sie das Erscheinungsbild des Textes einfach ändern. Aber wir gehen den anderen Weg und verwenden die angrenzenden Selektoren. Um Kommentare hervorzuheben, erstellen wir eine neue Klasse, nennen sie sic und wenden sie auf das Tag an
. Der erste Absatz nach einer solchen Überschrift wird durch eine Hintergrundfarbe und Einrückung hervorgehoben (Beispiel 11.2). Die restlichen Absätze bleiben unverändert.
Beispiel 11.2. Absatzstil ändern
HTML5 CSS 2.1 IE Cr Op Sa Fx
Methoden zum Fangen eines Löwen in der Wüste
Sequentielle Aufzählungsmethode
Der Löwe soll die Gesamtabmessungen L x B x H haben, wobei L die Länge des Löwen von der Nasenspitze bis zum Schwanzansatz, W die Breite des Löwen und H seine Höhe ist. Anschließend teilen wir die Wüste in eine Reihe elementarer Rechtecke auf, deren Größe mit der Breite und Länge des Löwen übereinstimmt. In Anbetracht der Tatsache, dass sich der Löwe möglicherweise nicht ausschließlich in einem bestimmten Bereich, sondern gleichzeitig in zwei von ihnen aufhält, sollte der Käfig zum Fangen eine größere Fläche haben, nämlich 2 L x 2 B. Dadurch vermeiden wir den Fehler, dass nur die Hälfte des Löwen oder, schlimmer noch, nur sein Schwanz im Käfig gefangen wird.
Wichtiger Hinweis
Um die Berechnungen zu vereinfachen, kann der Schwanz verworfen und nicht als Messfehler berücksichtigt werden.
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 11.2.
Reis. 11.2. Ändern des Erscheinungsbilds eines Absatzes mithilfe benachbarter Selektoren
In diesem Beispiel wird der Text mit Absätzen formatiert (tag
), aber durch Schreiben von H2.sic + P wird der Stil nur für den ersten Absatz nach dem Tag festgelegt
, dem eine Klasse namens sic hinzugefügt wurde.
Angrenzende Selektoren lassen sich bequem für Tags verwenden, denen automatisch Einrückungen hinzugefügt werden, um das Ausmaß der Einrückung unabhängig anzupassen. Zum Beispiel, wenn Tags in einer Reihe vorhanden sind
Und , dann kann der Abstand zwischen ihnen einfach über benachbarte Selektoren angepasst werden. Ähnlich verhält es sich mit aufeinanderfolgenden Tags. Und
Und
Und auch in anderen ähnlichen Fällen. Beispiel 11.3 ändert auf diese Weise den Abstand zwischen angegebenen Tags.
Beispiel 11.3. Leerzeichen zwischen Überschriften und Text
HTML5 CSS 2.1 IE Cr Op Sa Fx
Überschrift 1
Überschrift 2
Absatz!
Da bei Verwendung benachbarter Selektoren der Stil nur auf das zweite Element angewendet wird, wird die Größe der Ränder durch die Einbeziehung eines negativen Werts für die Eigenschaft „margin-top“ reduziert. In diesem Fall steigt der Text nach oben und nähert sich dem vorherigen Element.
Fragen zum Überprüfen
1. Welche Tags in diesem Code sind benachbart?
Schwefelsäureformel:H 2 ALSO 4
UND
- Und
- Und
- Und
- Und
2. Der folgende HTML-Code ist verfügbar:
Fermats letzter Satz
X N+ Y N
= Z N
wobei n eine ganze Zahl > 2 ist
Welcher Text wird im Stil „SUP + SUP“ (Farbe: Rot;) rot hervorgehoben?
- Zweites „n“
- Zweites und drittes „n“.
Benachbarte werden dagegen seltener genutzt. Der Hauptunterschied besteht darin, dass sie einander folgen müssen. Um Ihnen das Erlernen dieses Themas zu erleichtern, schlage ich vor, die folgende Struktur zu zerlegen:
<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...
Wie Sie wahrscheinlich aus der vorherigen Lektion erraten haben, sind die Tags 2, 3, 4, 5, 6 kontextbezogene Selektoren für tag1. Benachbarte Selektoren sind wiederum: tag2 und tag3, tag4 und tag5, Aber zur selben Zeit tag2 Und tag4 liegen nicht nebeneinander. Die Stileigenschaften werden auf das letzte Element angewendet, das Sie daneben angeben. Sie müssen nur die Reihenfolge der Selektoren befolgen. Die allgemeine Schreibsyntax lautet:
Selektor1 + Selektor2+ ...+SelektorN ( Eigenschaft1: Wert; Eigenschaft2: Wert; ... EigenschaftN: Wert)
Schauen wir uns dieses Beispiel an:
Überschrift
Etikett P ist ein an das Tag angrenzender Selektor h1
