Angrenzende Selektoren. CSS-Tutorial - Angrenzende CSS-Selektoren Angrenzende CSS-Elemente

Beschreibung

Elemente einer Webseite werden als benachbart bezeichnet, wenn sie im Dokumentcode unmittelbar aufeinander folgen.

Syntax

E + F (Beschreibung der Stilregeln)

Um den Stil benachbarter Elemente zu steuern, verwenden Sie das Pluszeichen (+), das zwischen den beiden Selektoren E und F platziert wird. Leerzeichen um das Pluszeichen sind optional. Dieser Stil wird auf Element F angewendet, jedoch nur, wenn es an Element E angrenzt und diesem unmittelbar folgt. Schauen wir uns ein paar Beispiele an.

Lorem ipsum Schmerz setz dich.

Etikett ist ein untergeordnetes Element des Tags

Weil es sich in diesem Behälter befindet. Jeweils

Fungiert als Elternteil .

Lorem ipsum Schmerz sitzen amet.

Schlagworte Und überlappen sich in keiner Weise und stellen benachbarte Elemente dar. Die Tatsache, dass sie sich im Inneren des Behälters befinden
Hat keinen Einfluss auf ihre Einstellung.

Lorem ipsum Schmerz, Sit Amet, consectetuer Adipiszieren Elite.

Benachbarte Tags sind hier Und , und auch Und . Gleichzeitig Und Benachbarte Elemente werden nicht behandelt, da sich zwischen ihnen ein Container befindet .
HTML5 CSS 2.1 IE Cr Op Sa Fx Angrenzende Selektoren Lorem ipsum Schmerz, Sit Amet, consectetuer adipisierende Elite. Lorem ipsum dolor sit amet, consectetuer adipisierende Elite. Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 1. Reis. 1. Rote Textfarbe für benachbarte Selektoren Browser Internet Explorer 7 wendet den Stil nicht an, wenn zwischen den Selektoren ein Kommentar steht (B + /* plus */ I ). Vor nicht allzu langer Zeit wurde eine neue, achte Version des Internet Explorer-Browsers veröffentlicht, und alle Webmaster atmeten erleichtert auf. Schließlich begann der Browser von Microsoft, wenn auch mit großer Verzögerung, mehr oder weniger die HTML- und CSS-Spezifikationen zu respektieren und Webseiten angemessen anzuzeigen. Im Allgemeinen erwarteten dies alle von der siebten Version. Allerdings brachte es auf den ersten Blick außer der Unterstützung für die Verwendung von Tabs nichts Neues. Aber das ist nur auf den ersten Blick... Nur wenige wissen von einer weiteren sehr bedeutenden Neuerung im IE7: In dieser Version begann dieser Browser erstmals, neue Arten von CSS-Selektoren zu unterstützen. Ein Selektor ist der Teil einer CSS-Regel, der angibt, auf welche Elemente er angewendet werden soll. Ihre Haupttypen sind fast allen Webmastern bekannt. Aber nicht viele Leute haben von so „exotischen“ Dingen wie benachbarten und untergeordneten Selektoren sowie Attributselektoren gehört. Dies liegt daran, dass es lange Zeit keinen Sinn machte, sie zu verwenden, da einer der beliebtesten Browser, der Internet Explorer, sie nicht unterstützte. Mittlerweile hat sich die Situation jedoch geändert, und es wäre nicht sehr klug, die neuen Möglichkeiten außer Acht zu lassen, die sich eröffnet haben. Deshalb habe ich mich entschieden, diese kurze Rezension zu schreiben. Angrenzende Selektoren Gibt an, dass eine CSS-Regel nur dann auf ein Element angewendet wird, wenn es an ein anderes Element angrenzt. Beispiel: Elemente werden Nachbarn genannt, wenn sie im Seitencode sind , und zwischen ihnen es gibt keine anderen Elemente Hier sind die angrenzenden Tags Und , und auch Und . Schlagworte Und sind nicht benachbart, da ein Fremdelement zwischen ihnen „eingeklemmt“ ist . Die Syntax zum Schreiben eines benachbarten Selektors lautet wie folgt: I-Element + II-Element (...) Erstellen wir diese Regel für unser Beispiel: stark + em (Farbe: rot;) stark + ins (Farbe: blau;) So wird das Ergebnis aussehen: Wie Sie sehen, hat sich der Stil nur für das Tag geändert , und das Tag war davon nicht betroffen. Dies veranschaulicht die Adjazenzregel sehr gut. Führen wir ein weiteres Experiment durch – ersetzen Sie es in unserem Beispiel An : Elemente werden Nachbarn genannt, wenn sie im Seitencode sind nebeneinander liegen, und zwischen ihnen es gibt keine anderen Elemente Wie Sie vielleicht erraten haben, der Stil des zweiten Tags wird sich nicht ändern: Dies geschieht, weil es nicht mehr angrenzt . Untergeordnete Selektoren Gibt an, dass eine CSS-Regel nur dann auf ein Element angewendet wird, wenn es ein untergeordnetes Element eines anderen Elements ist. Beispiel: Ein Element gilt als untergeordnetes Element des Elements, in dem es verschachtelt ist, wenn dies der Fall ist Ist direkt Nachkomme dieses Element Hier sind die Kinder das Aushängeschild in Bezug auf das Tag Und auch in Bezug auf . Etikett in Bezug auf das Tag Es ist kein Kind, weil es nicht sein unmittelbares Elternteil ist. Die Aufnahmesyntax lautet wie folgt: I-Element > II-Element (...) Untergeordnete Selektoren sind den bekannten Kontextselektoren sehr ähnlich, mit dem einzigen Unterschied, dass bei Kontextselektoren die Verschachtelungstiefe der Elemente keine Rolle spielt. Bei Kindern darf die Verschachtelungstiefe nicht mehr als eine Ebene betragen. Lassen Sie uns das alles veranschaulichen, indem wir für unser Beispiel ein paar Regeln aufstellen: p> p > em (Farbe: blau; ) /* Kinderauswahl */ Wir erhalten folgendes Ergebnis: In unserem Fall das Tag kein Kind von Denn es befindet sich darin auf der zweiten Verschachtelungsebene. Natürlich „funktionierte“ der Stil, der den Text blau machen sollte, für ihn nicht. Ersetzen wir nun den untergeordneten Selektor durch einen Kontextselektor: p > stark (Farbe: rot;) /* Untergeordneter Selektor */ p em (Farbe: blau; ) /* Kontextselektor */ Das Ergebnis ist vorhersehbar: Im Gegensatz zum untergeordneten Selektor „funktionierte“ in diesem Fall der Kontextselektor, da die Tiefe der Verschachtelungsebene für ihn nicht wichtig ist. Attributselektoren Geben Sie an, dass die CSS-Regel nur für Elemente gilt, die das im Selektor angegebene Attribut enthalten. Beispiel: CSS ist eine sehr wichtige Technologie, ohne die es unmöglich ist, eine anständige Website zu erstellen Die Hauptkonzepte von CSS sind Stilregeln, Selektoren, Eigenschaften und ihre Werte. Hier hat nur der erste Absatz einen selbstdefinierten Parameter (oder ein Attribut, was dasselbe ist) align. Daher gilt die CSS-Regel für den align-Attributselektor speziell für den ersten Absatz und nur für diesen. Die Syntax zum Schreiben eines Attributselektors lautet: [Attribut] (...) Erstellen wir eine Regel für unser Beispiel (der Übersichtlichkeit halber geben wir zusätzlich zum Attribut auch das Tag selbst an, für das es berücksichtigt werden soll): p (Farbe: grün; Schriftstärke: fett;) Es ist nicht schwer zu erraten, was am Ende passieren wird: Bisher habe ich einen sogenannten einfachen Attributselektor beschrieben. Für ihn ist nur das Vorhandensein des Attributs auf dem Tag wichtig, seine Bedeutung ist jedoch überhaupt nicht wichtig. Mittlerweile gibt es noch andere Arten von Attributselektoren. Werfen wir einen kurzen Blick darauf: [attribute=“value“] ( … ) Gilt nur für Elemente, die den angegebenen Wert für dieses Attribut haben. [Attribut^=“Wert“] ( … ) Fast das Gleiche, nur sollte das Attribut in diesem Fall nur mit dem angegebenen Wert beginnen und ihn nicht unbedingt vollständig enthalten. [attribute$=“value“] ( … ) Ebenso mit dem Unterschied, dass hier das Attribut mit dem angegebenen Wert enden muss. [attribute*=“value“] ( … ) Diese Notation gibt an, dass der Wert an einer beliebigen Stelle im Attribut vorkommen kann. Wie Sie sehen, bieten uns Nachbarn, untergeordnete Elemente und Attributselektoren viele neue Optionen zum Schreiben effektiven CSS-Codes. Sie können eine Vielzahl von Beispielen finden, in denen deren Verwendung den „traditionellen“ bekannten Selektoren vorzuziehen wäre. Deshalb halte ich es für sinnvoll, diese Techniken zu übernehmen. Wie Sie diese nutzen, ist Ihnen überlassen. Autor des Artikels: Alexey Antonov, Ersteller und Administrator des Blogs über Webtechnologien www.lounwolf.ru ===================================================================== Der Nachbarelementselektor wählt ein Element aus, das sich im Dokumentcode direkt hinter einem anderen angegebenen Element befindet. Nehmen wir als Beispiel einen HTML-Code. Der Absatz und darin fettig Element, und hier ist es geneigt Element. Es gibt drei Tags: , Und . Schlagworte Und in einem Container verschachtelt Sie sind Kinder von ihm. Aber im Verhältnis zueinander sind sie benachbart. Die Syntax eines benachbarten Selektors lautet: der Selektor des vorherigen Elements, gefolgt von einem „+“-Zeichen, gefolgt vom Selektor des ausgewählten Elements. Lassen Sie uns den angrenzenden Selektor bearbeiten: Angrenzender Selektor in CSS. Der Absatz und darin fettig Element, und hier ist es geneigt Element. Hier fettig Und betont Elemente, mehr geneigt. Im Beispiel können Sie sehen, dass der benachbarte Elementselektor im ersten Absatz ausgelöst wurde. Hier sind die Tags Und gehen einer nach dem anderen. Und im zweiten Absatz wird das Tag zwischen ihnen verwendet , jetzt gibt es zwei weitere benachbarte Tag-Paare: + Und + . Ein Fehler wäre in diesem Fall das Tag neben dem Tag Markieren Sie hier ist ein untergeordnetes Element des Tags Und er wiederum ist ein Elternteil . Das folgende Beispiel wird nicht funktionieren: Angrenzender Selektor in CSS. Der Absatz und darin fettig Element, und hier ist es geneigt Element. Hier fettig Und betont Elemente, mehr geneigt. Ein realeres Beispiel Schauen wir uns genauer an, wie der Nachbarselektor funktioniert. echtes Beispiel. In großen Artikeln, die mehrere Abschnitte enthalten, die mit Tags gekennzeichnet sind , empfiehlt es sich, den oberen Rand zu vergrößern (Margin-Top-Eigenschaft). Eine Einrückung von 30 Pixel macht den Text lesbar. Aber wenn das Tag kommt gleich danach , und dies könnte am Anfang des Artikels stehen, im oberen Einzug über dem Tag wird überflüssig sein. Dieses Problem kann mithilfe eines Selektors für benachbarte Elemente gelöst werden. Hier ist der HTML-Code mit einem Beispiel dafür, wie der Selektor für benachbarte Elemente funktioniert. Angrenzender Selektor in CSS Hallo! Überschrift h2 Überschrift h2 Der Text des Absatzes handelt von unglaublichen Abenteuern. Überschrift h2 Der Text des Absatzes handelt von unglaublichen Abenteuern. Überschrift h2 Der Text des Absatzes handelt von unglaublichen Abenteuern. Mit dem nebenstehenden Auswahlwerkzeug lässt sich außerdem bequem der Einzug zwischen der Überschrift und dem ersten Absatz des Abschnitts anpassen, in unserem Beispiel handelt es sich um Tags Und Es ist auch erwähnenswert, dass es zum Reduzieren von Einzügen praktisch ist, negative Werte zu verwenden. Angrenzender Selektor in CSS Hallo! Überschrift h2 Der Text des Absatzes handelt von unglaublichen Abenteuern. Überschrift h2 Der Text des Absatzes handelt von unglaublichen Abenteuern. Überschrift h2 Der Text des Absatzes handelt von unglaublichen Abenteuern. Überschrift h2 Der Text des Absatzes handelt von unglaublichen Abenteuern. Nun ein Beispiel dafür, wie man einen benachbarten Selektor verwendet, um alle Elemente der Liste außer dem ersten auszuwählen. Angrenzender Selektor in CSS Listen Sie Element Nr. 1 auf. Listen Sie Element Nr. 2 auf. Listen Sie Punkt Nr. 3 auf. Listen Sie Punkt Nr. 4 auf. Folgendes wird als Ergebnis dieses Beispiels passieren: Abbildung 1. Arbeit von Beispiel Nr. 5. Guten Abend liebe Kolleginnen und Kollegen, heute werden wir mit Ihnen zwei weitere lernen Wähler die aufgerufen werden untergeordnete und angrenzende CSS-Selektoren. In größerem Maße können Sie darauf verzichten, für Ihre Entwicklung müssen Sie sie jedoch lernen und manchmal anwenden, 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 innerhalb des übergeordneten Elements befinden. 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. Befinden sich in einem untergeordneten Block noch weitere Elemente, so 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. Benachbarte 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 - Elemente, die im Dokumentcode nacheinander angeordnet sind. Ein Beispiel hierfür ist dieses. Wir haben einen Absatz und ein folgendes Tag Mithilfe von Stilen fügen wir das gleiche Ergebnis für das Tag hinzu Abt >spanne ( } Schriftgröße: 200 %; P +spanne( } Farbe: rot; - Elemente, die im Dokumentcode nacheinander angeordnet sind. Ein Beispiel hierfür ist dieses. Wir haben einen Absatz und ein folgendes Tag Das Ergebnis der Codeausführung wird in beiden Fällen auf das Tag angewendet , 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