„CSS Selectors“ apgaulės lapas

CSS selektoriai yra modeliai, naudojami DOM elementams pasirinkti.

Čia yra selektorių naudojimo pavyzdys. Šiame kode air h1esate selektoriai:

a { color: black; } h1 { font-size 24px; }

Apgaulingas paprastų selektorių lapas

headpasirenka elementą su headžyma

.red parenka visus „raudonos“ klasės elementus

#nav parenka elementus su „nav“ ID

div.rowparenka visus elementus su divžyma ir „eilutės“ klase

["]parenka visus elementus su aria-hiddenatributu, kurio reikšmė yra „true“

  • Pakaitos simbolių parinkiklis. Parenka visus DOM elementus. Žr. Žemiau, kaip jį naudoti su kitais selektoriais

Galime įdomiai derinti selektorius

Keletas pavyzdžių:

li aDOM palikuonių kombinatorius. Visos ažymos, kurios yra ližymų antrinė

div.row *parenka visus elementus, kurie yra elementų su divžyma ir „eilutė“ palikuonys (arba antriniai)

li > aSkirtumo kombinatorius. Pasirinkite tiesioginius palikuonis, o ne visus palikuonis, tokius kaip palikuonių selektoriai

li + aGreta esantis kombinatorius. Jis parenka elementą, prieš kurį iškart yra ankstesnis elementas. Šiuo atveju tik pirmasis apo kiekvieno li.

li, aParenka visus aelementus ir visus lielementus.

li ~ aBrolių ir seserų kombinatorius. Pasirenka aelementą po lielemento.

Pseudo selektoriai arba pseudo struktūrinės klasės

Tai taip pat naudinga parenkant struktūrinius elementus iš DOM.

Štai keletas jų:

:first-child Pirmąjį elementą nukreipkite iškart į kito elemento vidų (arba jo antrinį elementą)

:last-child Nukreipkite paskutinį elementą iškart į kito elemento vidų (arba jo antrinį elementą)

:nth-child()Taikykite n-ąjį elementą iškart kito elemento viduje (arba antrame elemente). Pripažįsta sveikieji skaičiai, even, odd, ar formules

a:not(.name)Parenka visus ane .nameklasės elementus

::afterLeidžia įterpti turinį į puslapį iš CSS, o ne HTML. Nors galutinio rezultato iš tikrųjų nėra DOM, jis puslapyje rodomas taip, lyg būtų. Šis turinys įkeliamas po HTML elementų.

::beforeLeidžia įterpti turinį į puslapį iš CSS, o ne HTML. Nors galutinio rezultato iš tikrųjų nėra DOM, jis puslapyje rodomas taip, lyg būtų. Šis turinys įkeliamas prieš HTML elementus.

Mes galime naudoti pseudoklases, kad apibrėžtume ypatingą DOM elemento būseną. Bet jie patys nenurodo elemento.

Keletas pavyzdžių:

:hover pasirenka elementą, kurį užveda pelės žymeklis

:focus pasirenka elementą, gaunantį židinį iš klaviatūros arba programiškai

:active pasirenka elementą, kurį spustelėja pelės žymeklis

:link parenka visas nuorodas, kurios dar nebuvo spustelėtos

:visited pasirenka nuorodą, kuri jau spustelėta

Daugiau informacijos apie n-ąjį vaiko parinkiklį

Pasirinkėjas nth-childyra „css psuedo“ klasė, pasirinkusi modelį, pagal kurį suderinamas vienas ar keli elementai, palyginti su jų padėtimi tarp brolių ir seserų.

Sintaksė

 a:nth-child(pattern) { /* Css goes here */ }

Raštas

Šablonai, kuriuos priima, nth-childgali būti raktiniai žodžiai arba formos An + B lygtis.

Raktažodžiai

Keista

Nelyginis pateikia visus nelyginius tam tikro tipo elementus.

 a:nth-childe(odd) { /* CSS goes here */ }
Net

Net pateikia visus lyginius tam tikro tipo elementus.

 a:nth-childe(even) { /* CSS goes here */ }

An + B

Pateikia visus elementus, atitinkančius lygtį An + B, už kiekvieną teigiamą sveikojo skaičiaus reikšmę n (be 0).

Pavyzdžiui, kiekvienas trečias inkaro elementas atitiks:

 a:nth-childe(3n) { /* CSS goes here */ }

Žaidimai

„CSS Diner“ yra internetinis žaidimas, kuriame mokoma beveik visko, ko reikia žinoti apie selektorių derinimą.

Papildomos nuorodos

CSS selektorių yra daug daugiau! Sužinokite apie juos „CodeTuts“, CSS-tricks.com arba „Mozilla Developer Network“.