CSS Selektorite petulehekülg

CSS-is on selektorid mustrid, mida kasutatakse DOM-elementide valimiseks.

Siin on näide selektorite kasutamisest. Järgmises koodis aja h1olete valijad:

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

Pettusleht tavalistest selektoritest

headvalib headsildiga elemendi

.red valib kõik elemendid, millel on punane klass

#nav valib elemendid, millel on 'nav' Id

div.rowvalib kõik elemendid koos divsildiga ja klassiga 'rida'

["]valib kõik elemendid aria-hiddenatribuudiga väärtusega "true"

  • Metamärgi valija. Valib kõik DOM-i elemendid. Vaadake allpool selle kasutamist teiste selektoritega

Valijaid saame ühendada huvitavatel viisidel

Mõned näited:

li aDOMi järeltulijate kombinator. Kõik asildid, mis on lisiltide laps

div.row *valib kõik elemendid, mis on divmärgendi ja rea ​​rea ​​klassi järeltulijad (või laps)

li > aErinevuste kombinator. Valige otsesed järeltulijad kõigi järeltulijate asemel nagu järeltulijad

li + aKülgnev kombinaator. See valib elemendi, millele eelneb vahetult endine element. Sel juhul ainult esimene aigaühe järel li.

li, aValib kõik aelemendid ja kõik lielemendid.

li ~ aÕdede-vendade kombinator. Valib aelemendile järgneva lielemendi.

Pseudovalijad või pseudokonstruktsioonide klassid

Need on kasulikud ka struktuurielementide valimiseks DOM-ist.

Siin on mõned neist:

:first-child Sihtige esimene element kohe teise elemendi sisse (või selle lapsele)

:last-child Sihtige viimane element kohe teise elemendi sisse (või selle lapsele)

:nth-child()Sihtige n-nda elemendi kohe teise elemendi sisse (või lapse alla). Tunnistab täisarvud, even, oddvõi valemid

a:not(.name)Valib kõik aelemendid, mis ei kuulu .nameklassi

::afterVõimaldab HTML-i asemel CSS-ist lehele sisu sisestada. Kuigi lõpptulemus pole tegelikult DOM-is, ilmub see lehel justkui. See sisu laaditakse pärast HTML-elemente.

::beforeVõimaldab HTML-i asemel CSS-ist lehele sisu sisestada. Kuigi lõpptulemus pole tegelikult DOM-is, ilmub see lehel justkui. See sisu laaditakse enne HTML-elemente.

DOM-i elemendi eriseisundi määratlemiseks saame kasutada pseudoklase. Kuid nad ei näita elementi ise.

Mõned näited:

:hover valib elemendi, mida hiirekursor hõljutab

:focus valib elemendi, mis saab fookuse klaviatuurilt või programmiliselt

:active valib elemendi, millele hiirekursor klõpsab

:link valib kõik lingid, millel pole veel klõpsatud

:visited valib lingi, millel on juba klõpsatud

Lisateave n-nda lapse valija kohta

nth-childValijat on css psuedo klassi võttes muster, mille sobitada üks või mitu elementi võrreldes oma positsiooni õdede-vendade hulgas.

Süntaks

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

Muster

Mudelid, mida aktsepteerib, nth-childvõivad esineda märksõnade kujul või vormi An + B võrrandina.

Märksõnad

Kummaline

Paaritu tagastab kõik antud tüüpi paaritu elemendid.

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

Isegi tagastab kõik antud tüüpi paariselemendid.

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

An + B

Tagastab kõik elemendid, mis sobivad võrrandiga An + B iga positiivse täisarvu n jaoks (lisaks 0).

Näiteks sobib iga kolmas ankurelement järgmine:

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

Mängud

CSS Diner on veebimäng, mis õpetab peaaegu kõike, mida selektorite kombineerimise kohta teada on.

Lisaviited

CSS-i valijaid on palju rohkem! Lisateavet leiate veebisaitidest CodeTuts, CSS-tricks.com või Mozilla Developer Networkist.