Níže uvedený příklad nebude fungovat:

Odstavec a v něm mastný prvek a je to tady nakloněnýživel.

Zde mastný A zdůraznil prvky, více nakloněný.

Reálnější příklad

Podívejme se, jak funguje sousední selektor na realističtějším příkladu. Ve velkých článcích obsahujících několik sekcí označených štítky

, je vhodné zvýšit horní okraj (vlastnost margin-top). Díky odsazení 30px bude text čitelný. Ale pokud tag

přichází hned poté

, a to může být na začátku článku, horní odrážka nad značkou

bude nadbytečný. Tento problém lze vyřešit pomocí selektoru sousedních prvků.

Zde je html kód s příkladem toho, jak funguje selektor sousedních prvků.

Ahoj!

Nadpis h2

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Pomocí sousedního nástroje pro výběr je také vhodné upravit odsazení mezi nadpisem a prvním odstavcem sekce, v našem příkladu se jedná o značky

A

Za zmínku také stojí, že pro snížení odsazení je vhodné použít záporné hodnoty.

Ahoj!

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nadpis h2

Text odstavce je o neuvěřitelných dobrodružstvích.

Nyní příklad, jak použít sousední selektor k výběru všech prvků seznamu kromě prvního.

• Položka seznamu #1.
• Položka seznamu #2.
• Položka seznamu č. 3.
• Položka seznamu #4.

Toto se stane v důsledku tohoto příkladu:

Obrázek 1. Příklad č. 5 v práci.

1. června 2015

Naproti tomu sousední se používají méně často. Hlavní rozdíl je v tom, že musí následovat toho druhého. Abychom to lépe pochopili toto téma, navrhuji analyzovat tuto strukturu:

<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...

Jak jste pravděpodobně uhodli z předchozí lekce, značky 2, 3, 4, 5, 6 jsou kontextové selektory pro tag1. Na druhé straně sousední selektory budou: tag2 a tag3, tag4 a tag5, ale zároveň tag2 A tag4 nejsou sousedící. Vlastnosti stylu se použijí na poslední prvek, který určíte jako sousední. Musíte pouze dodržovat pořadí voličů. Obecná syntaxe psaní je:

Selektor1 + Selektor2+ ...+selektorN ( vlastnost1: hodnota; vlastnost2: hodnota; ... vlastnostN: hodnota)

Podívejme se na tento příklad:

Záhlaví

Štítek p je selektor sousedící se značkou h1

Tento text by měl být zelený

Sousední CSS selektory

Sousední selektory CSS nebo sourozenecké selektory, jak se jim také říká, vám umožňují aplikovat styly na prvek v případech, kdy se vyskytuje před určitým prvkem v kódu HTML, to znamená, že prvky v tomto případě musí být na stejné úrovni vnoření. . Sousední selektory jsou rovněž složené a jsou tvořeny jednoduchými selektory (třídy, identifikátory atd.).

Abyste jasně pochopili, co jsou sousední prvky, podívejme se znovu na známý příklad, jen mírně upravený.

<тег1> <тег2>... <тег3><тег4>... <тег5><тег6>...

V tomto příkladu jsou pouze dva páry sousedních prvků - tyto jsou<тег2>A<тег3>a také<тег3>A<тег5>, Vše. To znamená<тег2>A<тег5>již nejsou ve vztahu k sobě sousedé, protože mezi nimi existuje<тег3> .

Sousední selektory se skládají ze dvou nebo více běžných selektorů oddělených znaménkem „+“ (plus), kde je nejprve označen úplně první prvek v kódu, poté ten, který následuje za ním, a poté ten, který následuje bezprostředně po druhém. a tak dále. Styly se jako obvykle aplikují na prvek, jehož selektor je v seznamu poslední. Obecná syntaxe.

selektor1 + selektor2 ( vlastnost: hodnota; vlastnost: hodnota; ...)

Mezery na obou stranách znaménka "+" mohou být umístěny nebo ne, podle přání.

Příklad použití sousedních selektorů v CSS

Záhlaví

Text. Silný. Text. Em.

Text. Em. Text. Silný.

Text. Em. Text. Silný.

Výsledek v prohlížeči

Záhlaví

Text. Silný. Text. Em.

Text. Em.

Text. Em.

Text. Silný. V tomto příkladu je podtržen pouze první odstavec s červeným textem a pouze druhý odstavec, protože žádné jiné prvky neodpovídají pravidlům stylu. Zejména obsah prvku v tomto případě nebude zelený, protože je od nadpisu oddělen nikoli jedním, ale dvěma odstavci. Mimochodem, jak vidíte, ve druhém stylu byly přiřazeny sousední a podřízené selektory najednou. Rozhodl jsem se tedy ještě jednou připomenout, že selektory různé typy

lze libovolně kombinovat.

Internet Explorer 6.0 nerozumí sousedním voličům (nebo podřízeným voličům). Pamatujte si to.

1. Domácí úkol.
2. Vytvořte pravidelné dvousloupcové rozvržení s nabídkou na stránce. Nechte položky seznamu mít obrázkové značky.