Twórz style i układy CSS Ilość

Sep 12, 2025

Jak

W tym samouczku zajmiemy się sposobami zmiany stylów CSS elementów, a także pozornie stylizując rodziców, w zależności od liczby elementów. Zobaczymy również, jak zmienić układ elementów na podstawie ich ilości, aby stworzyć bardziej adaptacyjne Układ strony internetowej. to lepiej wykorzystuje przestrzeń.

CSS Tricks, aby zrewolucjonizować układy internetowe

Wreszcie pokryjemy użycie liczników CSS, aby wyświetlić indeks elementu w określonym w niej, a także wyświetlanie całkowitej liczby wewnątrz rodzica. Wszystko to zostanie osiągnięte tylko z czystymi CSS, bez potrzeby JavaScript lub Framework, prowadząc do prostego i bardziej wydajnego kodu.

Zbudować witrynę bez potrzeby niekończącego się kodu, potrzebujesz Kreator strony internetowej . I niezależnie od możliwości witryny, zapewnić swoje hosting Usługa pasuje do celu. Za coś innego, zdobądź swoje magazyn w chmurze aż do zarysowania.

Selektory pojedynczego elementu.

CSS3 ma tylko jedną parę selektorów, które mogą określić ilość elementów, a mianowicie: Selektory: Tylko dla: Tylko typu. Powiedziawszy to, że są one w stanie tylko ustalić, czy element jest samodzielny lub ma rodzeństwo. Selektor: Tylko dziecko pasuje do elementów, które są jedynym dzieckiem ich rodzica, podczas gdy: Tylko typu pasuje do elementów, które są jedynymi z ich typu.

Niestety, to tak daleko, jak pojedyncze selektory, ale istnieje kilka innych selektorów, które mogą kierować elementy oparte na ich kolejności w zestawie podobnych elementów. Są to: NTH-Child,: nth-of-typ, nth-last-dziecko i nth-last-of-typ, które są zazwyczaj używane do kierowania elementów na podstawie ich zamówienia w zestawie podobnych elementów. Selektory: NTH-Last-Last i NTH-Last of-Type są używane do określenia kolejności elementów zliczającymi do tyłu z ostatniego elementu do pierwszego. Łącząc je z innymi selektorami pozwala nam zbudować bardziej złożone łańcuchy, które kierują określone elementy oparte na ich ilości.

Łańcuchy selektorowe specyficzne dla ilości

selector chains — Selektor: po pierwszym typie: nth-ostatni typ (3) i ogólny kombinator rodzeństwa ~ można połączyć, aby kierować pierwszą z trzech i wszystkich jego rodzeństwa, stąd wszystko w zestawie trzech

Ze czterech wyżej wymienionych selektorów, główny, którego będziemy używany w tym samouczku, jest nth-ostatni typ. Różnica między tym a selektorem NTH-LAST-LIFT jest to, że ta ostatnia obejmuje wszystkie rodzeństwo elementów w zestawie, podczas gdy pierwsze zawiera tylko elementy tego samego typu HTML i dlatego jest bardziej selektywny. W pozostałej części tego samouczka użyjemy selektorów typu -of, jednak wariantów -ch są równie ważne.

N / ostatni typ może być używany wraz z bardziej popularnymi selektorami pierwszego pierwszego typu, aby utworzyć łańcuch, który kieruje się pierwszym elementem w zestawie żądanej ilości. Na przykład, możemy użyć: pierwszego typu: NTH-Last-of-type (3) do elementów docelowych, które są zarówno pierwszym, jak i trzecim od końca ich typu lub, innymi słowy, pierwszy z Zestaw trzech. Możemy przedłużyć to za pomocą ogólnego kombinatora rodzeństwa ~, aby wybrać wszystkie rodzeństwo, które podążają za pierwszym zestawem trzech. Łącząc te dwa łańcuchy wyboru, możemy utworzyć kompleksowy selektor, który celuje elementy, które są pierwsze z trzech i wszystkich elementów tego samego typu, który podąża za nim, wybierając w ten sposób wszystkie elementy w zestawie trzech.

 .box: pierwszego typu: NTH-Last-of-typ (3),
.box: Pierwszy typ: NTH-Last-of type (3) ~ .box

Ten łańcuch wyboru nie tylko działa nie tylko dla określonej liczby elementów, ale może być nawet modyfikowany do kierowania szeregiem ilości.

selector chain — Selekcjonerów NTH-Last-of-Type (N + 2) i: NTH-Last-of-Type (-N + 2) może być używany do docelowych elementów w zestawach o więcej niż i mniej niż dwóch odpowiednio

Jeśli chcemy kierować elementy w zestawie z ilością więcej niż lub mniej niż określona wartość M, możemy użyć łańcucha odpowiednio z technikami (N + M) i (-N + M). Na przykład, aby kierować wszystkie elementy w zestawie dwóch lub więcej elementów, których możemy użyć:

 .box: po pierwszym typie: nth-ostatni typ (N + 2),
.box: pierwszego typu: nth-last-of-typ (N + 2) ~ .box

Podobnie możemy kierować wszystkie elementy w zestawie dwóch lub mniejszych elementów przy użyciu:

.box: Pierwszy typ: NTH-Last-of-Type (-N + 2),
.box: pierwszego typu: nth-last-of type (-n + 2) ~ .box

Jak widać, jest to potężny łańcuch wyboru, który pozwala nam osiągnąć bardzo interesujące i przydatne rzeczy bez potrzeby obsługi JavaScript lub innych ram. Jest to szczególnie przydatne, jeśli chodzi o tworzenie układów adaptacyjnych, które zmieniają się na podstawie liczby elementów.

Dynamiczne układy specyficzne dla ilości

grid layouts with odd and even numbers — Dla parzystej liczby układów sieci wyglądają świetnie, ale nie tak wiele dla liczb nieparzystych

Powiedzmy, że chcemy wyświetlić grupę pudełek, które pokazują wyniki wyszukiwania lub wezwanie API w dwuosobowej, układu siatki. Problem polega na tym, że wyniki pochodzą ze źródła zewnętrznego i nie mamy sposobu, aby poznać liczbę wyników, które zostaną zwrócone, dlatego nie wiemy, ile zostanie utworzonych. Podczas gdy siatka wygląda świetnie na równą liczbę pudełek, gdy jest stosowany do liczby nieparzystej ostatnie pudełko siedzi w rzędzie samotnie i wygląda ... Cóż, rodzaj dziwnie.

Jest to szczególnie problematyczne podczas korzystania z elementów flexbox za pomocą flex-rosnących do nich stosowane, ponieważ powoduje, że ostatni element wzrastał do pustej przestrzeni w rzędzie, biorąc w ten sposób pełną szerokość. Jednym ze sposobów zapobiegania temu może być dokonanie pierwszego z nieparzystej liczby pudełek zajmować pełny wiersz, stosując szerokość 100% do pierwszych skrzynek, które są również nieparzystą liczbą pudełek z końca, przy użyciu: pierwszego dziecka: nth-last-of type (nieparzyste). Zapewnia to lepszy układ, ponieważ daje pierwsze, a zatem większość istotnych lub ostatnich wyniku większego znaczenia niż ostatnia.

Możemy nawet dodać specjalny przypadek, gdy ilość jest podzielna przez trzy przy użyciu: pierwszego dziecka: nth-last-of-type (3N), aby przekształcić siatkę w układ trzech kolumn, stosując szerokość 33% do pierwszego Pudełka w zestawie z podzielnym ilością przez trzy i wszystkie pola, które podążają za nim.

 .box {
  Szerokość: 50%;
}

.box: First-Child: NTH Last-of type (Odd) {
  Szerokość: 100%;
}

.box: pierwsze dziecko: nth-last-of-typ (3N),
.box: pierwsze dziecko: nth-last of-type (3N) ~ .box {
  Szerokość: 33%;
}

Wniosek

different layouts — Układy można zmienić w oparciu o liczbę elementów, używając łańcuchów selektorów CSS

Jak widzieliśmy, Selektory CSS mogą być razem przykute w różnych interesujących sposobach, aby zastosować style i układy adaptacyjne, które zmieniają się na podstawie ilości elementów. Łańcuchy wyboru można również wykorzystać do pozornie stosowania stylów do rodzica zestawu elementów określonej ilości, przy użyciu :: przed lub :: Po pseudo-elementów, które są umieszczone, aby podjąć pełny rozmiar rodzica. W połączeniu z licznikami CSS te pseudo-elementy mogą być używane do wyświetlania całkowitej liczby potomków w elemencie macierzystym, a także tekst, który zmienia się w zależności od ilości potomków.

Techniki te oferują cenny sposób tworzenia dynamicznych stylów i układów opartych na ilości, które są przydatne podczas obsługi nieznanej liczby elementów, co często jest przypadkiem w przypadku radzenia sobie z API.

Ten artykuł został pierwotnie opublikowany w wydaniu 308 netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 308 tutaj lub Subskrybuj tutaj .

Powiązane artykuły:

5 wskazówek dotyczących super szybkich CSS
Utwórz reagujący układ z siatką CSS
Zrozumienie właściwości wyświetlania CSS

Twórz style i układy CSS Ilość

Selektory pojedynczego elementu.

Łańcuchy selektorowe specyficzne dla ilości

Dynamiczne układy specyficzne dla ilości

Wniosek

Jak - Najpopularniejsze artykuły

Buduj teren w Houdini 17

10 wskazówek dotyczących opanowania aplikacji Apple App

Jak malować jak XIX-wieczny master

Trzy kroki do musującego nocnego nieba w akwarela

Jak zacząć od Sass

Utwórz ramki w stylu w Photoshopie

Jak malować zakrzywione szkło na kasku kosmicznym

Jak opanować sztukę wentylatora 3D

Kategorie