Beágyazott listák automatikus számozással

A listákat aktívan használják a tartalomblokkok automatikus számozásához. Azonban ha egymásba ágyazott listákat használ, akkor nem kaphatod meg az 1.1, 1.2 és 1.3 típusú alosztályok számozását, mivel minden lista független lesz. De amit nem lehet megtenni az SHTML-ben, akkor a stílusokra kényszeríthet.

1. példa Egy normál beágyazott lista

Ennek a példának az eredményét az 1. ábrán mutatjuk be. 1. Vegye figyelembe, hogy az egymásba ágyazott listák számozása újraindul.

Ábra. 1. A beágyazott listák típusa

Most távolítsa el a listák beépített számozását, és hozzon létre egy új, de a szükséges formában. Ehhez háromféle stílusú attribútumra van szükség: visszaállítás. ellentételezés és tartalom.

counter-reset - olyan változót ad meg, amely tárolja a számláló értékét;

counter-increment - növeli vagy csökkenti a számláló értékét a megadott számmal;

tartalom - a számláló (változó) argumentum használatakor kinyomtatja a számláló értékét. Működik az ál-elemek után vagy az előtt.

Az első szint listájához a számláló változót list1-nek hívják. és a második szintre - list2. Ezután a listák számlálók kezdeményezése a következő lesz.

Ebben az esetben az összekapcsolt szelektorok segítik a csatolt listát a külső listáról elválasztani. Az OL OL design azt jelenti, hogy a stílust csak a címkére alkalmazza

. de csak akkor, ha egy másik tagon belül található
.

A számláló értékét az OL LI: választó előtt növeli. amelyhez a stílus attribútumai ellentételezést és tartalmat adnak hozzá. Az értéklista1 számláló-hozzárendelési attribútum növeli a számláló értékét egy értékkel, és a tartalom: számláló (list1) "." Megjeleníti a számláló előtt a számláló értékét. Ezek az attribútumok párban működnek, ezért egyszerre engedélyeznie kell őket.

OL LI: korábban ellentételezés: list1; / * Növelje a számláló értékét * /
tartalom: számláló (list1) "."; / * Adja meg az értéket 1. 2. * /
>
OL OL LI: korábban ellentételezés: list2; / * Növelje a számláló értékét * /
tartalom: számláló (list1) "." számláló (lista2) "."; / * A 2.1., 2.2. * /
>

Az elhelyezett listán ismét használjuk a szétkapcsolókat (OL OL), és egyidejűleg használjuk a számláló1 és a list2 kimenetét. ebben az esetben megkapjuk a szükséges számozást.

A végső kódot a 2. példában adjuk meg.

2. példa: Saját számozású beágyazott listák

Ennek a példának az eredményét az 1. ábrán mutatjuk be. 2.



Ábra. 2. A lista automatikus számozása a böngészőben Opera

A fenti példa nem működik az Internet Explorer böngészőben a 7-es verzióhoz képest, mivel nem támogatja az adott stílus tulajdonságait.

Mivel a böngésző Internet Explorer nem támogatja sok érdekes stílusú attribútumot, különösen azért, mert a listákon szereplő szokásos számokat érintetlenül kell hagyni. Ehhez törölje a listatípus-típusát: none. De ez más böngészőkre is hatással lesz, amelyekben a példa helyesen működik, ezért be kell töltenie a hackot - így a böngészők eltérő stíluskóddal rendelkeznek. Például használhatja a! Fontos címkét. Amikor hozzáfűzné a Fonts attribútum értékét, annak fontossága megnövekszik. Ha ugyanazon attribútum értékét újra definiálja anélkül! a böngészők figyelmen kívül hagyják. De nem az Intenet Explorer 6-os vagy újabb verziójában.

LI <
list-style-type: none! fontos; / * A számozás eltávolítása a böngészőben Opera, Safari, Fire Foch * /
list-style-type: decimális; / * A számozást az IE6 böngészőben hagyjuk *
>

Ha ezeket a kódokat a 2. példa LI választójával egy vonallal helyettesíti, akkor az összes böngészőben jól működik az elhelyezett lista.