Luo määrällisiä CSS-tyylejä ja ulkoasuja

Sep 12, 2025

Miten tehdään

Tässä opetusohjelmassa tarkastelemme tapoja muuttaa elementtien CSS-tyylit sekä näennäisesti muotoilua vanhempiensa mukaan elementtien määrästä. Näemme myös, kuinka muuttaa elementtien asettelua niiden määrän perusteella, jotta voidaan luoda mukautuvampi Verkkosivuston asettelu Tämä hyödyntää parempaa tilaa.

CSS temppuja mullistamaan web-asetteluja

Lopuksi kattaamme CSS-laskurien käytön, jotta voit näyttää elementin indeksin sen sisällä olevassa sarjassa sekä näyttämällä kokonaislaskenta vanhemman sisällä. Kaikki tämä saavutetaan vain puhtailla CSS: llä ilman JavaScriptin tai kehyksien tarvetta, mikä johtaa yksinkertaiseen ja tehokkaampaan koodiin.

Rakentaa sivuston ilman loputtoman koodin tarvetta, tarvitset a Verkkosivuston rakentaja . Ja riippumatta sivustosi ominaisuuksia, varmista sivujen ylläpito Palvelu sopii tarkoitukseen. Jotain erilaista, saat pilvivarasto naarmuuntua.

Yksittäiset elementinvalitsimet

CSS3: llä on vain yksi valintakirja, joka voi määrittää elementtien määrän, nimittäin: vain lapsi ja: vain-of-tyyppiset valitsimet. Sanotaan tämän, he todella pystyvät määrittämään, onko elementti omalla tai sillä on sisaruksia. The: vain-lapsi valitsin vastaa elementtejä, jotka ovat ainoa lapsi vanhempien, kun taas: vain-of-tyyppi vastaa elementtejä, jotka ovat ainoita, niiden tyyppi.

Valitettavasti se on niin pitkälle kuin yksittäiset valitsimet menevät, mutta muutamia muita valikoita, jotka voivat kohdistaa elementtejä niiden järjestyksen perusteella samanlaisten elementtien joukkoon. Nämä ovat: nth-child,: nth-of-tyyppinen, nth-viime lapsi ja viimeinen tyyppinen, jota tyypillisesti käytetään kohdeelementteihin niiden järjestyksessä vastaavien elementtien joukkoon. The: nnen-last-lapsi ja n: nnen-last-of-valitsimia käytetään määrittämään elementtien järjestystä laskee taaksepäin viimeinen elementti ensimmäiseen. Näiden yhdistäminen muiden valitsimien kanssa mahdollistaa monimutkaisempia ketjuja, jotka kohdistavat erityisiä elementtejä niiden määrän perusteella.

Määräkohtaiset valintaketjut

selector chains — Valitsija: Ensimmäisen tyyppinen: nth-of-of-of-tyyppinen (3) ja yleinen sisarusyhdistelmä ~ voidaan yhdistää kohdistamaan ensimmäiset kolme ja kaikki sisarukset, joten kaikki kolme joukko

Neljä edellä mainituista valitsimista, joita käytämme tässä opetusohjelmassa, on viimeisen tyyppinen. Tämän ja n: n viimeisen lapsenvalitsimen välinen ero on se, että jälkimmäiset sisältävät kaikki asetetut elementit "sisarukset, kun taas entinen sisältää saman HTML-tyypin elementtejä ja siksi valikoivampi. Tämän opetusohjelman loppuosassa käytämme -F-tyyppisiä valitsimia, mutta - Lapsi-variantit ovat yhtä päteviä.

N: n viimeistä tyyppiä voidaan käyttää yhdessä suosittujen ensisijaisten valikosta, jotta voidaan luoda ketju, joka kohdistaa ensimmäisen elementin halutun määrän sarjassa. Voimme esimerkiksi käyttää: ensisijaista: nth-viimeistä tyyppiä (3) kohdeelementteihin, jotka ovat sekä ensimmäistä että kolmasosaa niiden tyypin päässä tai toisin sanoen ensimmäinen kolme. Voimme sitten laajentaa tämän yleisen sisaren yhdistelmällä ~ valita kaikki sisarukset, jotka seuraavat kolme joukko kolme. Näiden kahden valintaketjun yhdistäminen, voimme luoda monimutkaisen valitsimen, joka kohdistaa elementtejä, jotka ovat ensimmäiset kolme ja kaikki samantyyppiset elementit, jotka seuraavat sitä, valitsemalla kaikki elementit kolmeen kolmeen.

 .Box: Ensimmäisen tyyppinen: nth-viimeinen tyyppi (3),
.BOX: Ensimmäisen tyypin: nth-of-of-tyyppinen (3) ~ .box

Tämä valintaketju ei toimi pelkästään tiettyyn elementteihin, vaan sitä voidaan jopa muuttaa kohdistaa useita määriä.

selector chain — Valitsimet N: n viimeinen tyyppi (n + 2) ja: nth-viimeistä tyyppiä (-N + 2) voidaan käyttää kohdistamaan elementtejä yli ja alle kaksi vastaavasti

Jos haluamme kohdistaa elementtejä sarjassa, jonka määrä on enemmän kuin tai vähemmän kuin tietty arvo M, voimme käyttää ketjua (n + m) ja (-N + m) tekniikoilla vastaavasti. Esimerkiksi kaikkien elementtien kohdistamiseksi kaksi tai useampia elementtejä, joita voimme käyttää:

 .Box: Ensimmäisen tyyppinen: nth-viimeinen tyyppi (n + 2),
.Box: Ensimmäisen tyyppinen: nth-viimeinen tyyppi (n + 2) ~ .Box

Samoin voimme kohdistaa kaikki elementit kahdella tai vähemmän elementillä käyttämällä:

.Box: Ensimmäisen tyyppinen: NTH-LAST-of-tyyppinen (-N + 2),
.Box: Ensimmäisen tyyppinen: nth-of-of-tyyppinen (-N + 2) ~ .Box

Kuten näet, tämä on voimakas valintaketju, jonka avulla voimme saavuttaa erittäin mielenkiintoisia ja hyödyllisiä asioita ilman JavaScriptin tai muiden puitteiden tarvetta. Se on erityisen hyödyllinen, kun luodaan mukautuvat ulkoasut, jotka muuttuvat elementtien määrän perusteella.

Dynaaminen, Määräkohtaiset ulkoasut

grid layouts with odd and even numbers — Jopa jopa elementtien määrän grid-asetteluja näyttävät hyvältä, mutta ei niin paljon parittomille numeroille

Sanotaan, että haluamme näyttää ryhmän laatikkoja, jotka näyttävät haun tulokset tai API-puhelu kahdessa sarakkeessa, Grid-asettelu. Ongelma on siinä, että tulokset tulevat ulkoisesta lähteestä ja meillä ei ole mitään keinoa tietää palautettavien tulosten lukumäärää, joten emme tiedä, kuinka monta laatikkoa luodaan. Vaikka verkko näyttää hyvältä tasaiselle laatikolle, kun sitä käytetään pariton numero, viimeinen laatikko istuu peräkkäin yksin ja näyttää ... hyvin, eräänlainen pariton.

Tämä on erityisen ongelmallista, kun käytetään Flexbox-kohteita, joilla on Flex-Grow, jota heitä käytetään, koska se aiheuttaa viimeisen elementin kasvavan rivin tyhjään tilaan, jolloin koko leveys. Yksi tapa estää tämä voisi olla ensimmäinen pariton määrä laatikkoja ottaa täyden rivin soveltamalla 100%: n leveys ensimmäisistä laatikoista, jotka ovat myös pariton määrä laatikkoa lopulta käyttäen: Ensimmäinen lapsi: nth-viimeinen tyyppi (pariton). Tämä tarjoaa paremman asettelun, koska se antaa ensimmäisen ja siten merkityksellisin tai viimeisimmän tuloksen enemmän merkitystä kuin viimeinen.

Voimme jopa lisätä erityisen kotelon, kun määrä on jaollinen kolmella käyttämällä: Ensimmäinen lapsi: nth-of-of-tyyppinen (3N), joka muuttaa verkkoon kolmipylvääseen asetteluun käyttämällä 33%: n leveys Laatikot sarjassa, jonka määrä on jaettava kolmella ja kaikki laatikot, jotka seuraavat sitä.

 .Box {
  Leveys: 50%;
}

.Box: First-Child: nth-viimeinen tyyppi (pariton) {
  Leveys: 100%;
}

.Box: First-Child: NTH-OF-tyyppinen (3N),
.Box: First-Child: nth-of-of-tyyppinen (3n) ~ .box {
  Leveys: 33%;
}

Johtopäätös

different layouts — Layout voidaan muuttaa elementtien lukumäärän perusteella vain CSS-valintaketjujen avulla

Kuten olemme nähneet, CSS-valikoimia voidaan ketjuttaa yhdessä erilaisissa mielenkiintoisissa tavoista tyylien ja adaptiivisten ulkoasujen soveltamiseksi, jotka muuttuvat elementtien määrän perusteella. Valitusketjuja voidaan käyttää myös näennäisesti soveltamaan tiettyjen määrien elementtien vanhempaa käyttämällä :: Ennen tai:: pseudo-elementtien jälkeen, jotka sijoitetaan vanhemman täysikokoiseksi. Yhdessä CSS-laskureiden kanssa näitä pseudo-elementtejä voidaan käyttää estämään jälkeläisten kokonaismäärän ja tekstistä, joka muuttuu jälkeläisten määrästä riippuen.

Nämä tekniikat tarjoavat arvokasta tapaa luoda dynaamisia, määriäpohjaisia tyylejä ja ulkoasuja, jotka ovat hyödyllisiä, kun käsittelet tuntemattomia elementtejä, mikä on usein tapaus, kun käsitellään API: ää.

Tämä artikkeli julkaistiin alun perin 308 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 308 täällä tai Tilaa täältä .

Aiheeseen liittyvät artikkelit:

5 Vihjeitä Super-Fast CSS: lle
Luo reagoiva asettelu CSS-verkkoon
CSS: n näytön ominaisuus

Luo määrällisiä CSS-tyylejä ja ulkoasuja

Yksittäiset elementinvalitsimet

Määräkohtaiset valintaketjut

Dynaaminen, Määräkohtaiset ulkoasut

Johtopäätös

Miten tehdään - Suosituimmat artikkelit

Kuinka käyttää Gravity Sketch

Kaikki mitä sinun tarvitsee tietää JavaScript-koodin jakamisesta

Lisää SVG-suodattimet CSS: llä

Kuinka veistää ihmisen nenä Zbrush: 4 Helppo vaiheet

Käytä WordPressia nimettömänä CMS

Luo digitaalinen etch a sketch

Miten suunnitella täydellinen kirja kansi

Kuinka yhdistää Painterin akvarecolores

Luokat