A CSS-ben a szelektorok a DOM elemek kiválasztásához használt minták.
Itt van egy példa a szelektorok használatára. Az alábbi kódot, aés h1a szelektor:
a { color: black; } h1 { font-size 24px; }Csalólap a közös választókról
headkiválasztja az elemet a headcímkével
.red kiválasztja az összes olyan elemet, amely a „vörös” osztályú
#nav kiválasztja az elemeket a 'nav' azonosítóval
div.rowkijelöli az összes elemet a divcímkével és a „sor” osztályral
["]kijelöli az aria-hiddenattribútummal rendelkező összes elemet, amelynek értéke „igaz”
- Helyettesítő karakter választó. Kiválasztja az összes DOM elemet. Az alábbiakban olvashatja el, hogy más szelektorokkal használja-e
Érdekes módon kombinálhatjuk a választókat
Néhány példa:
li aDOM leszármazott kombinátor. Minden acímke, amely a licímkék utódja
div.row *kijelöli az összes olyan elemet, amely a divtag és a „line” osztályú elemek leszármazottja (vagy gyermeke)
li > aKülönbség-kombinátor. Válasszon közvetlen utódokat, minden leszármazott helyett, mint a leszármazottak kiválasztói
li + aA szomszédos kombinátor. Kiválasztja azt az elemet, amelyet közvetlenül megelőz az előző elem. Ebben az esetben csak az első aután mindegyik li.
li, aKiválasztja az összes aelemet és az összes lielemet.
li ~ aA testvér kombinátor. Kiválasztja az aelemet követő lielemet.
Álszelektorok vagy álszerkezeti osztályok
Ezek a strukturális elemek DOM-ból történő kiválasztásához is hasznosak.
Itt van néhány közülük:
:first-child Az első elemet célozza meg közvetlenül egy másik elem belsejében (vagy annak gyermekében)
:last-child Célozza meg az utolsó elemet közvetlenül egy másik elem belsejében (vagy annak gyermekében)
:nth-child()Az n-edik elemet célozza meg közvetlenül egy másik elem belsejében (vagy annak gyermekében). Elismeri egészek, even, odd, vagy a képletek
a:not(.name)Kiválasztja az összes olyan aelemet, amely nem az .nameosztályba tartozik
::afterLehetővé teszi tartalom beszúrását egy oldalra CSS-ből, HTML helyett. Bár a végeredmény valójában nincs a DOM-ban, úgy tűnik, mintha az lenne. Ez a tartalom HTML elemek után töltődik be.
::beforeLehetővé teszi tartalom beszúrását egy oldalra CSS-ből, HTML helyett. Bár a végeredmény valójában nincs a DOM-ban, úgy tűnik, mintha az lenne. Ez a tartalom a HTML elemek előtt töltődik be.
Pszeudo-osztályokkal definiálhatjuk a DOM egyik elemének speciális állapotát. De önmagukban nem mutatnak elemet.
Néhány példa:
:hover kiválaszt egy elemet, amelyet egérmutató mutat
:focus kiválaszt egy elemet, amely a billentyűzetről vagy programszerűen kap fókuszt
:active kiválaszt egy elemet, amelyre egy egérmutató kattint
:link kijelöli az összes linket, amelyre még nem kattintottak
:visited kiválaszt egy linket, amelyre már kattintottak
További információ az n-ik gyermekválasztóról
A nth-childválasztó egy css psuedo osztály, amely mintát vesz egy vagy több elemnek a testvérek közötti helyzetükhöz viszonyítva.
Szintaxis
a:nth-child(pattern) { /* Css goes here */ }Minta
Az elfogadott minták nth-childkulcsszavak vagy An + B formájú egyenletek formájában jöhetnek létre.
Kulcsszavak
Páratlan
A páratlan egy adott típus összes páratlan elemét adja eredményül.
a:nth-childe(odd) { /* CSS goes here */ }Még
Még visszaadja az adott típusú összes páros elemet.
a:nth-childe(even) { /* CSS goes here */ }An + B
Visszaadja az An + B egyenletnek megfelelő elemeket n minden pozitív egész egész értéke esetében (a 0 mellett).
Például a következők minden 3. horgonyelemnek megfelelnek:
a:nth-childe(3n) { /* CSS goes here */ }Játékok
A CSS Diner egy webes játék, amely szinte mindent megtanít a szelektorok kombinálásával kapcsolatban.
További hivatkozások
Sokkal több CSS-választó van! Tudjon meg róluk a CodeTuts, a CSS-tricks.com vagy a Mozilla Developer Network webhelyen.