Turinys
- Vieno elemento selektoriai
- Kiekiui būdingos selektorių grandinės
- Dinamiški, kiekiui būdingi išdėstymai
- Išvada
Šioje pamokoje apžvelgsime būdus, kaip pakeisti CSS elementų stilius, taip pat, atrodytų, jų tėvų stilių, priklausomai nuo elementų skaičiaus. Taip pat pamatysime, kaip pakeisti elementų išdėstymą pagal jų kiekį, kad būtų sukurtas labiau pritaikomas svetainės išdėstymas, kuris geriau išnaudotų erdvę.
- CSS gudrybės, padedančios pakeisti savo interneto maketus
Galiausiai aptarsime CSS skaitiklių naudojimą rodant elemento indeksą jo viduje esančiame rinkinyje, taip pat parodant bendrą skaičių tėvų viduje. Visa tai bus pasiekta tik naudojant gryną CSS, nereikalaujant „JavaScript“ ar rėmelių, o tai padės sukurti paprastą ir efektyvesnį kodą.
Norėdami sukurti svetainę be begalinio kodo, jums reikės svetainės kūrėjo. Nepriklausomai nuo jūsų svetainės galimybių, įsitikinkite, kad jūsų interneto prieglobos paslauga atitinka tikslą. Norėdami gauti kažką kito, atnaujinkite debesies saugyklą.
Vieno elemento selektoriai
CSS3 turi tik vieną selektorių porą, kuri gali nustatyti elementų kiekį, būtent: tik-vaikas ir: tik-tipo selektoriai. Tai pasakę, jie iš tikrųjų gali nustatyti, ar elementas yra atskiras, ar turi brolių ar seserų. „Tik vaikas“ parinkiklis atitinka elementus, kurie yra vienintelis jų tėvų vaikas, o „Tik tipas“ atitinka elementus, kurie yra vieninteliai jų tipo.
Deja, tai yra vieninteliai selektoriai, tačiau yra keletas kitų selektorių, kurie gali nukreipti elementus pagal jų eilę panašių elementų rinkinyje. Tai yra: n-tas vaikas,: n-asis tipas, paskutinis vaikas ir n-asis paskutinis tipas, kurie paprastai naudojami taikant elementus pagal jų eiliškumą panašių elementų rinkinyje. : N-paskutinis-vaikas ir n-tas-paskutinis tipo selektoriai naudojami nustatyti elementų, skaičiuojančių atgal nuo paskutinio elemento iki pirmojo, eilės tvarką. Sujungę juos su kitais selektoriais, galime sukurti sudėtingesnes grandines, nukreipiančias į konkrečius elementus pagal jų kiekį.
Kiekiui būdingos selektorių grandinės
Iš keturių minėtų selektorių pagrindinis, kurį naudosime šioje pamokoje, yra n-tasis paskutinis. Skirtumas tarp šio ir n-to paskutinio vaiko parinkiklio yra tas, kad pastarasis į rinkinį įtraukia visus elementų brolius ir seseris, o pirmasis apima tik to paties HTML tipo elementus, todėl yra selektyvesnis. Likusioje šios pamokos dalyje naudosime -of tipo selektorius, tačiau -child variantai taip pat galioja.
N-tasis paskutinis tipo tipas gali būti naudojamas kartu su populiaresniais pirmojo tipo selektoriais, kad būtų sukurta grandinė, nukreipta į pirmąjį elementą norimo kiekio rinkinyje. Pvz., Galime naudoti: first-of-type: n-last-of-type (3), kad taikytume elementus, kurie yra tiek pirmasis, tiek trečiasis nuo jų tipo pabaigos, arba, kitaip tariant, pirmasis iš rinkinys iš trijų. Tada galime tai išplėsti bendruoju brolių ir seserų kombinatoriumi ~, kad pasirinktume visus brolius ir seseris, kurie seka pirmąjį iš trijų rinkinių. Sujungę šias dvi selektoriaus grandines, galime sukurti kompleksinį selektorių, kuris nukreipia elementus, kurie yra pirmieji iš trijų, ir visus to paties tipo elementus, kurie seka juo, taip pasirinkdami visus trijų elementų elementus.
.box: pirmasis tipo: n-asis paskutinis tipo (3), .box: pirmasis tipo: n-asis paskutinis tipo (3) ~ .box
Ši selektoriaus grandinė veikia ne tik tam tikram elementų skaičiui, bet ir gali būti modifikuota taip, kad būtų taikoma kiekių diapazonas.
Jei norime nukreipti elementus į rinkinį, kurio kiekis yra didesnis arba mažesnis už tam tikrą reikšmę m, grandinę galime naudoti naudodami (n + m) ir (-n + m) metodus. Pavyzdžiui, jei norite taikyti visus elementus dviejų ar daugiau elementų rinkinyje, mes galime naudoti:
.box: pirmasis tipo: n-asis paskutinis tipo (n + 2), .box: pirmasis tipo: n-asis paskutinis tipo (n + 2) ~ .box
Panašiai galime taikyti visus elementus dviejų ar mažiau elementų rinkinyje naudodami:
.box: pirmasis tipo: n-asis paskutinis tipo (-n + 2), .box: pirmasis tipo: n-asis paskutinis tipo (-n + 2) ~ .box
Kaip matote, tai yra galinga pasirinkimo grandinė, leidžianti mums pasiekti labai įdomių ir naudingų dalykų, nereikalaujant „JavaScript“ ar kitų sistemų. Tai ypač naudinga kuriant adaptyvius maketus, kurie keičiasi atsižvelgiant į elementų skaičių.
Dinamiški, kiekiui būdingi išdėstymai
Tarkime, kad norime rodyti langelių grupę, kurioje rodomi paieškos ar API iškvietimo rezultatai dviejų stulpelių tinklelio išdėstyme. Problema slypi tame, kad rezultatai gaunami iš išorinio šaltinio ir mes negalime žinoti, kiek rezultatų bus grąžinta, todėl nežinome, kiek langelių bus sukurta. Nors tinklelis puikiai atrodo lyginiam langelių skaičiui, pritaikytas nelyginiam skaičiui, paskutinis langelis sėdi vienas ant eilės ir atrodo ... na, kažkoks keistas.
Tai ypač problematiška, kai naudojami „flexbox“ elementai su jiems pritaikytais „flex-grow“ elementais, nes dėl to paskutinis elementas išauga į tuščią vietą eilėje ir taip užima visą plotį. Vienas iš būdų to išvengti gali būti tai, kad pirmoji iš nelyginio skaičiaus langelių užima visą eilę, taikant 100% plotį pirmosioms dėžėms, kurios taip pat yra nelyginis langelių skaičius, naudojant: first-child: n-asis paskutinis tipo (nelyginis). Tai suteikia geresnį išdėstymą, nes jis suteikia pirmajam, taigi svarbiausiam ar naujausiam rezultatui daugiau reikšmės nei paskutinis.
Mes netgi galime pridėti specialų atvejį, kai kiekis dalijamas iš trijų, naudojant: first-child: n-last-of-type (3n), kad tinklelis būtų paverstas trijų stulpelių išdėstymu, pirmiausia taikant 33% plotį. dėžutės rinkinyje, kurio kiekis dalijasi iš trijų, ir visi langeliai, einantys po jo.
. dėžutė {plotis: 50%; } .box: first-child: n-paskutinis tipo tipas (nelyginis) {plotis: 100%; } .box: first-child: n-paskutinis tipo tipas (3n), .box: first-child: n-asis paskutinis tipo tipas (3n) ~ .box {width: 33%; }
Išvada
Kaip matėme, CSS selektoriai gali būti sujungti įvairiais įdomiais būdais, kad būtų pritaikyti stiliai ir adaptyvūs išdėstymai, kurie keičiasi atsižvelgiant į elementų kiekį. Pasirinkimo grandinės taip pat gali būti naudojamos tam tikro kiekio elementų rinkinio tėvams, atrodo, pritaikyti stilius, naudojant pseudoelementus, kurie yra išdėstyti užimant visą tėvų dydį, naudodami :: prieš arba po pseudoelementų. Kartu su CSS skaitikliais šie pseudoelementai gali būti naudojami rodant bendrą palikuonių skaičių pirminiame elemente, taip pat tekstą, kuris keičiasi priklausomai nuo palikuonių kiekio.
Šie metodai yra vertingas būdas sukurti dinamiškus, kiekiais pagrįstus stilius ir išdėstymus, kurie yra naudingi tvarkant nežinomą elementų skaičių, o tai dažnai nutinka dirbant su API.
Šis straipsnis iš pradžių buvo paskelbtas 308 leidime neto, perkamiausias pasaulyje žurnalas, skirtas interneto dizaineriams ir kūrėjams. 308 numerį pirkite čia arba užsiprenumeruok čia.
