Vytvořit specifické styly CSS a rozložení

Sep 14, 2025

jak

V tomto tutoriálu se podíváme na způsoby změny stylů CSS prvků, stejně jako zdánlivě styling jejich rodiče, v závislosti na počtu prvků. Uvidíme také, jak změnit uspořádání prvků založených na jejich množství, aby se vytvořil adaptivnější rozložení webových stránek To je lepší využití prostoru.

CSS triky k revolucii vašich webových rozvržení

Nakonec pokryjeme používání čítačů CSS pro zobrazení indexu prvku uvnitř sady uvnitř IT, stejně jako zobrazení celkového počtu uvnitř rodiče. To vše bude dosaženo pouze s čistým CSS, bez nutnosti JavaScriptu nebo rámců, což vede k jednoduchému a efektivnějšímu kódu.

Vybudovat místo bez nutnosti nekonečného kódu, budete potřebovat Webové stránky Builder. . A bez ohledu na schopnosti vašich stránek, zajistit vaše web hosting Služba je vhodná pro účely. Pro něco jiného, získejte své cloudové úložiště až poškrábání.

Selektory jednotlivých prvků

CSS3 má pouze jeden pár selektorů, které mohou určit množství prvků, a to: pouze pro děti a: pouze selektory typu. Když to řekl, jsou opravdu schopni určit, zda je prvek sám o sobě nebo má sourozence. Pouze-dětský volič odpovídá prvkům, které jsou jediným dítětem jejich rodiče, zatímco: Pouze-typu odpovídá prvkům, které jsou jedinými z jejich typu.

Bohužel, to je co nejvíce jako jednotlivé selektory, ale existuje několik dalších selektorů, které mohou cílové prvky založené na jejich pořadí v souboru podobných prvků. Jedná se o: nth-dítě,: ntt-of-type, ntt-last-dítě a ntt-last-of-typu, které se obvykle používají k cílovým prvkům založeným na jejich pořadí v souboru podobných prvků. Selektory: NTH-Last-Dítě a Nth-Shest-of-typu typu se používají k určení pořadí prvků, které počítají dozadu z posledního prvku první. Kombinace těchto s jinými selektory nám umožňuje vytvářet složitější řetězce, které cílí specifické prvky založené na jejich množství.

Částečně specifické řetězce specifické

selector chains — Volič: Nejvhodnější typ: nth-laskavý typ (3) a obecný sourozenecký kombinátor může být kombinován tak, aby se zaměřil na první ze tří a všech svých sourozenců, tedy v souboru tří

Ze čtyř výše uvedených selektorů, hlavní, který budeme používat v tomto tutoriálu, je NTH-last-type. Rozdíl mezi tímto voličem NTH-Last-Díe je to, že takto obsahuje všechny sourozence prvků v sadě, zatímco první zahrnuje prvky stejného typu HTML a je proto selektivnější. Pro zbytek tohoto tutoriálu použijeme selektory typu-typu, avšak -child varianty jsou stejně platné.

Nizozístný typ může být použit spolu s více populárními selektory první typu k vytvoření řetězu, který se zaměřuje na první prvek v sadě požadovaného množství. Můžeme například použít: první typ: nth-last-of-typu (3) na cílové prvky, které jsou první, tak třetina z konce jejich typu nebo jinými slovy, první z nich Sada tří. Můžeme to prodloužit s obecným sourozeneckým kombinátorem ~ vybrat všechny sourozence, které následují první z množiny tří. Kombinace těchto dvou voličových řetězců můžeme vytvořit komplexní volič, který se zaměřuje na prvky, které jsou první ze tří a všech prvků stejného typu, které jej následují, čímž se vybírá všechny prvky v sadě tří.

 .box: první typ: NTH-POSLEDNÍ TYP (3),
.box: První typu: NTH-LET-typ (3) ~ .box

Tento voličový řetězec pracuje pouze pro konkrétní počet prvků, ale může být dokonce upraven tak, aby se zaměřil na řadu množství.

selector chain — SELECTORS NTH-POSLEDNÍ TYP (n + 2) a: NTH-POSLEDNÍ TYP (-N + 2) mohou být použity pro zaměření prvků v sadách více než dva než dva

Chceme-li se zaměřit na prvky v sadě s množstvím více nebo méně než určitou hodnotu m, můžeme řetězec používat techniky (n + m) a (-N + m). Například cílit všechny prvky v souboru dvou nebo více prvků, které můžeme použít:

 .box: první typ: NTT-POSLEDNÍ TYP (n + 2),
.box: Nejvhodnější typ: NTH-POSLEDNÍ TYP (n + 2) ~ .box

Podobně můžeme zařadit všechny prvky v sadě dvou nebo méně prvků pomocí:

.box: První typu: NTT-LET-typ (-N + 2),
.box: první typ: nth-lose-typu (-N + 2) ~ .box

Jak vidíte, je to silný voličový řetězec, který nám umožňuje dosáhnout velmi zajímavých a užitečných věcí bez nutnosti JavaScriptu nebo jiných rámců. To je zvláště užitečné, pokud jde o vytváření adaptivních rozvržení, které se mění na základě počtu prvků.

Dynamické rozložení specifické pro kvantity

grid layouts with odd and even numbers — Pro dokonce i počet prvků rozložení mřížky vypadají skvěle, ale ne tolik pro lichá čísla

Řekněme, že chceme zobrazit skupinu boxů, které ukazují výsledky hledání nebo volání API ve dvou sloupci, rozložení mřížky. Problém spočívá v tom, že výsledky pocházejí z externího zdroje a nemáme žádný způsob, jak poznat počet výsledků, které budou vráceny, proto nevíme, kolik boxů bude vytvořeno. Zatímco mřížka vypadá skvěle pro dokonce i počet krabic, když se použije na liché číslo, které poslední pole sedí na řádku sám a vypadá ... dobře, druh zvláštního.

To je obzvláště problematické při použití položek Flexbox s flex-růst aplikovanými na ně, protože způsobuje, že poslední prvek růst do prázdného prostoru na řádku, čímž se zabírá plnou šířku. Jedním ze způsobů, jak zabránit tomu by bylo možné provést první z lichého počtu krabic, zabírají celý řádek použitím šířky 100% na první krabice, které jsou také lichým počtem krabic z konce, pomocí: první dítě: ntt-laskavý typ (lichý). To poskytuje lepší uspořádání, protože dává první a proto nejrelevantnější nebo nedávný výsledek větší význam než poslední.

Dokonce můžeme dokonce přidat zvláštní případ, kdy množství je dělitelné třemi pomocí: první dítě: ntt-last-typu (3N) pro transformaci mřížky do tříolůžkového uspořádání sloupce použitím šířky 33% Boxy v sadě s množstvím dělitelných třemi a všechny boxy, které následují.

 .box {
  šířka: 50%;
}

.box: První dítě: NTT-last-type (lichý) {
  šířka: 100%;
}

.box: První dítě: NTT-POSLEDNÍ TYP (3N),
.box: První dítě: NTH-POSLEDNÍ TYP (3N) ~ .box {
  šířka: 33%;
}

Závěr

different layouts — Rozložení mohou být změněny na základě počtu prvků pouze použitím CSS volicí řetězce

Jak jsme viděli, CSS selektory mohou být připoutáni spolu v různých zajímavých způsobech, aby se uplatňovaly styly a adaptivní rozložení, které se mění na základě množství prvků. Voličové řetězy mohou být také použity pro zdánlivě aplikovat styly k rodiči souboru prvků určitého množství, pomocí :: před nebo :: po pseudo-prvky, které jsou umístěny, aby se zabíraly plnou velikost rodiče. V kombinaci s čítači CSS mohou být tyto pseudo-prvky použity k zobrazení celkového počtu potomků v nadřazeném prvku, stejně jako text, který se mění v závislosti na množství potomků.

Tyto techniky nabízejí cenný způsob vytváření dynamických, kvantitativních stylů a rozvržení, které jsou užitečné při manipulaci s neznámým počtem prvků, což je často případ při řešení API.

Tento článek byl původně zveřejněn v čísle 308 síť Časopis nejprodávanějšího světa pro webové designéry a vývojáře. Koupit problém 308 zde nebo Přihlásit se zde .

Související články:

5 tipů pro super-rychlé css
Vytvořte citlivý rozložení s mřížkou CSS
Pochopení vlastnosti CSS Display

Vytvořit specifické styly CSS a rozložení

Selektory jednotlivých prvků

Částečně specifické řetězce specifické

Dynamické rozložení specifické pro kvantity

Závěr

jak - Nejoblíbenější články

Adobe XD: Jak používat funkce Auto-Animate

Draw na výkon kontrastu v umění

Vytvořit speciální tiskové úpravy v aplikaci InDesign

vybudovat komplexní 3D sci-fi scénu v mixéru

Sestavte animovanou stránku přistání na rozdělení

zaostřete modely tvrdého povrchu v 3ds max

4 Základní tipy pro optimalizaci obrazu

Jak navrhnout animovaný hrdina

Kategorie