Benachbarte CSS-Selektoren. Spezielle Selektoren in CSS. Angrenzende, untergeordnete, kontextbezogene und Tag-Attributselektoren. Der Attributwert endet mit einem bestimmten Text
Beschreibung
Elemente einer Webseite werden als Nachbarn bezeichnet, wenn sie im Dokumentcode unmittelbar aufeinander folgen.
Syntax
E + F (Beschreibung der Stilregeln)
Das Pluszeichen (+) wird verwendet, um den Stil benachbarter Elemente zu steuern, der zwischen den beiden Selektoren E und F platziert wird. Leerzeichen um das Pluszeichen sind optional. Dieser Stil gilt für das F-Element, jedoch nur, wenn es neben und unmittelbar nach dem E-Element liegt. Schauen wir uns einige Beispiele an.
Lorem ipsum dolor setz dich amet.
Etikett ist ein Kind des Tags
Weil es sich in diesem Behälter befindet. Beziehungsweise
Dient als Elternteil .
Lorem ipsum dolor sitzen amet.
Stichworte und nicht überlappen und benachbarte Elemente darstellen. Die Tatsache, dass sie sich im Container befinden Beeinflusst ihre Einstellung nicht. Lorem ipsum dolor sit amet, berater adipiscing elit.
Die Tags sind hier benachbart und , und auch und ... Dabei und benachbarte Elemente sind nicht miteinander verbunden, da sich zwischen ihnen ein Container befindet .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, berater adipiscing elit.
Lorem ipsum dolor sitzen amet, berater adipiscing elit.
Das Ergebnis dieses Beispiels ist in Abb. 1 dargestellt. 1.
Zahl: 1. Rote Textfarbe für benachbarte Selektoren
Browser
Internet Explorer 7 wird nicht formatiert, wenn zwischen den Selektoren ein Kommentar (B + / * plus * / I) steht.
Vlad Merzhevich
Elemente einer Webseite werden als Nachbarn bezeichnet, wenn sie im Dokumentcode unmittelbar aufeinander folgen. Schauen wir uns einige Beispiele für Elementbeziehungen an.
Lorem ipsum dolor setz dich amet.
In diesem Beispiel das Tag ist ein Kind des Tags
Weil es sich in diesem Behälter befindet. Beziehungsweise
Dient als Elternteil .
Lorem ipsum dolor sitzen amet.
Hier Tags und nicht überlappen und benachbarte Elemente darstellen. Die Tatsache, dass sie sich im Container befinden Beeinflusst ihre Einstellung in keiner Weise. Lorem ipsum dolor sit amet, berater adipiscing elit.
Die Tags sind hier benachbart und , und auch und ... Dabei und benachbarte Elemente sind nicht miteinander verbunden, da sich zwischen ihnen ein Container befindet .
Das Pluszeichen (+) wird verwendet, um den Stil benachbarter Elemente zu steuern, der zwischen zwei Selektoren platziert wird. Die allgemeine Syntax lautet wie folgt.
Selektor 1 + Selektor 2 (Beschreibung der Stilregeln)
Leerzeichen um das Pluszeichen sind nicht erforderlich. Der Stil wird auf Selektor 2 angewendet, jedoch nur, wenn er neben Selektor 1 liegt und unmittelbar darauf folgt.
Beispiel 11.1 zeigt die Struktur der Interaktion von Tags miteinander.
Beispiel 11.1. Verwenden benachbarter Selektoren
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, berater adipiscing elit.
Lorem ipsum dolor sitzen amet, berater adipiscing elit.
Das Beispielergebnis ist in Abb. 1 dargestellt. 11.1.
Zahl: 11.1. Hervorheben von Text mit Farbe mithilfe benachbarter Selektoren
In diesem Beispiel wird die Farbe des Texts für den Inhalt des Containers geändert. wenn unmittelbar nach dem Behälter positioniert ... Im ersten Absatz wird diese Situation implementiert, sodass das Wort "consectetuer" im Browser rot angezeigt wird. Im zweiten Absatz gibt es zwar ein Tag aber kein Etikett nebenan Nein, daher wird diesem Container kein Styling zugewiesen.
Schauen wir uns ein praktischeres Beispiel an. Es ist oft notwendig, verschiedene Fußnoten und Notizen in den Text eines Artikels aufzunehmen. Normalerweise wird zu diesem Zweck eine neue Stilklasse erstellt und auf einen Absatz angewendet, sodass Sie das Erscheinungsbild des Textes leicht ändern können. Aber wir werden den anderen Weg gehen und benachbarte Selektoren verwenden. Um Kommentare hervorzuheben, erstellen Sie eine neue Klasse, nennen Sie sie sic und wenden Sie sie auf das Tag an
... Der erste Absatz nach einer solchen Überschrift wird mit der Hintergrundfarbe und dem Einzug hervorgehoben (Beispiel 11.2). Der Rest der Absätze bleibt unverändert.
Beispiel 11.2. Ändern Sie den Absatzstil
HTML5 CSS 2.1 IE Cr Op Sa Fx
Methoden, um einen Löwen in der Wüste zu fangen
Sequentielle Suchmethode
Der Löwe habe die Gesamtabmessungen L x B x H, wobei L die Länge des Löwen von der Nasenspitze bis zur Schwanzbürste ist, W die Breite des Löwen ist und H seine Höhe ist. Dann teilen wir die Wüste in eine Reihe elementarer Rechtecke, 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 Gebiet befindet, sondern gleichzeitig auf zwei von ihnen, sollte der Käfig für die Fischerei aus einem vergrößerten Gebiet bestehen, nämlich 2L x 2W. Dank dessen vermeiden wir Fehler, wenn nur die Hälfte des Löwen oder, schlimmer noch, nur sein Schwanz im Käfig gefangen wird.
Wichtige Notiz
Um die Berechnungen zu vereinfachen, kann der Schwanz als Messfehler verworfen und ignoriert werden.
Das Ergebnis dieses Beispiels ist in Abb. 1 dargestellt. 11.2.
Zahl: 11.2. Ändern des Erscheinungsbilds eines Absatzes mithilfe benachbarter Selektoren
In diesem Beispiel wird der Text mit Absätzen (Tag) formatiert
), aber beim Schreiben von H2.sic + P wird der Stil nur für den ersten Absatz nach dem Tag festgelegt
welches eine Klasse namens sic hinzugefügt hat.
Benachbarte Selektoren sind nützlich für Tags, die automatisch eingerückt werden, um die Auffüllmenge unabhängig anzupassen. Zum Beispiel, wenn es Tags in einer Reihe gibt
und Dann kann der Abstand zwischen ihnen einfach mit Hilfe benachbarter Selektoren eingestellt werden. Ähnlich ist die Situation bei aufeinanderfolgenden Tags. und
und
Und auch in ähnlichen Fällen. Beispiel 11.3 ändert auf diese Weise den Einrückungsgrad zwischen den angegebenen Tags.
Beispiel 11.3. Einrückungen 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 Einrückungen reduziert, indem ein negativer Wert für die Eigenschaft "Rand oben" eingefügt wird. In diesem Fall steigt der Text näher am vorherigen Element an.
Fragen zu überprüfen
1. Welche Tags in diesem Code sind benachbart?
Schwefelsäureformel:H. 2SO 4
UND
- und
- und
- und
- und
2. Es gibt den folgenden HTML-Code:
Fermats letzter Satz
X. n + Y. n
\u003d Z. n
dabei ist n eine ganze Zahl\u003e 2
Welcher Text wird im Stil SUP + SUP (Farbe: rot;) rot hervorgehoben?
- Zweites "n"
- Zweites und drittes "n".
Guten Abend, liebe Kollegen, heute werden wir mit Ihnen zwei weitere lernen wählerdie genannt werden cSS-Selektoren für Kinder und Geschwister... In größerem Umfang können Sie jedoch auf sie verzichten. Für Ihre Entwicklung müssen sie jedoch gelernt und manchmal angewendet werden, damit sie in Ihrem Gedächtnis bleiben. Deshalb werden wir diskutieren, welche selektoren sind benachbart, und welche Kinder, und wir werden mit einem Beispiel analysieren.
Untergeordnete CSS-Selektoren - Elemente, die sich innerhalb des übergeordneten Elements befinden. Ein Beispiel hierfür kann wie folgt sein. Wir haben einen Block, der einen Absatz, einen anderen Block und ein Bild enthält. Diese drei Elemente sind Kinder. Wenn der untergeordnete Block auch andere Elemente enthält, sind sie nicht mehr untergeordnete Elemente des ersten Blocks, sondern untergeordnete Elemente des Blocks, in dem sie sich direkt befinden. Ich hoffe du verstehst, worum es geht.
Benachbarte CSS-Selektoren - Elemente, die sich im Dokumentcode nacheinander befinden. Ein Beispiel dafür ist dies. Wir haben einen Absatz gefolgt von einem Tag spanne... Alles ist ziemlich klar, aber wir müssen das alles nur anhand realer Beispiele erkennen.
Text in einem Absatz
Text in span
Kein untergeordneter Text mehr in einem Absatz
Verwenden von Stilen, um dasselbe Ergebnis für das Tag hinzuzufügen spanne
Div \u003e span (
schriftgröße: 200%;
}
p + span (
farbe Rot;
}
Das Ergebnis der Codeausführung wird in beiden Fällen auf das Tag angewendet spanneda es ein Kind 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 vollständig damit befasst kinder- und Geschwisterselektoren in CSSund Sie müssen nur Ihr Wissen in der Praxis stärken, bis bald!
Die Nachbarauswahl wählt ein Element unmittelbar hinter einem anderen angegebenen Element im Dokumentcode aus. Nehmen wir als Beispiel ein Stück HTML-Code.
Der Absatz und darin fettig Element, und siehe geneigt Element.
Es gibt drei Tags:
, und ... Stichworte und in einem Container verschachtelt
Sie sind Kinder davon. Aber im Verhältnis zueinander sind sie benachbart.
Die Syntax für den benachbarten Selektor ist der Selektor des vorherigen Elements, gefolgt vom Selektor des ausgewählten Elements. Lassen Sie den benachbarten Selektor funktionieren:
Der Absatz und darin fettig Element, und siehe geneigt Element.
Hier fettig und unterstrichen Elemente, mehr geneigt.
Im Beispiel sehen Sie, dass der Geschwister-Selektor im ersten Absatz ausgelöst wurde. Hier Tags und geh eins nach dem anderen. Und im zweiten Absatz wird das Tag zwischen ihnen verwendet Jetzt gibt es zwei weitere benachbarte Tag-Paare: + und + .
Ein Fehler in diesem Fall ist das Tag neben dem Tag
Hier taggen ist ein Kind des Tags
Und er wiederum ist der Elternteil .
Das folgende Beispiel funktioniert nicht:
Der Absatz und darin fettig Element, und siehe geneigt Element.
Hier fettig und unterstrichen Elemente, mehr geneigt.
Ein realistischeres Beispiel
Schauen wir uns anhand eines realistischeren Beispiels an, wie der benachbarte Selektor funktioniert. In großen Artikeln mit mehreren markierten Abschnitten
ist es wünschenswert, den oberen Rand zu erhöhen (Eigenschaftsrand oben). Ein Einzug von 30px macht den Text besser lesbar. Aber für den Fall das Tag kommt gleich danach , und dies kann am Anfang des Artikels die Einrückung über dem Tag sein wird überflüssig sein. Sie können dieses Problem mit einem benachbarten Element-Selektor lösen.
, und dies kann am Anfang des Artikels die Einrückung über dem Tag sein wird überflüssig sein. Sie können dieses Problem mit einem benachbarten Element-Selektor lösen.
Hier ist der HTML-Code für ein Beispiel für die Funktionsweise des Nachbarselektors.
Hallo!
H2 Überschrift
H2 Überschrift
Der Text des Absatzes handelt von unglaublichen Abenteuern.
H2 Überschrift
Der Text des Absatzes handelt von unglaublichen Abenteuern.
H2 Überschrift
Der Text des Absatzes handelt von unglaublichen Abenteuern.
Mit dem nebenstehenden Auswahlwerkzeug können Sie auch die Einrückung zwischen der Überschrift und dem ersten Absatz des Abschnitts anpassen. In unserem Beispiel handelt es sich um Tags