Joka kerta kun käytämme CSS: ää, käytämme valitsimia. Tästä huolimatta CSS-valitsimet ovat yksi eritelmän laiminlyötyistä osista.
Puhumme suurista muutoksista CSS3: ssa, mutta liian usein unohdamme perusasiat. Valitsimien hyvä käyttö tekee päivittäisestä koodauksestamme yksinkertaisemman ja tyylikkämmän. Tänään aion peittää 10 valitsinta, joka usein luistaa mielemme, mutta ovat sekä tehokkaita että erittäin hyödyllisiä.
* Valitsin voi olla se, joka muistat helposti, mutta sitä ei useinkaan käytetä. Se, mitä se tekee, on kaiken tyyli sivussa ja se on loistava nollauksen luomiseen ja myös sellaisten sivujen oletusasetusten luomiseen, kuten fonttiperhe ja koko, jonka haluat.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Tätä valitsinta kutsutaan vierekkäiseksi valitsimeksi ja se, mitä se tekee, valitsee elementin, joka on välittömästi ensimmäisen elementin jälkeen. Jos haluat valita ensimmäisen div-otsikon jälkeen kirjoitat:
header + div {margin-top: 50px;}Tämä valitsin valitsee vain suorat lapset toisin kuin AB , joka valitsee minkä tahansa A-tason lapset . Tämä valitsin on suositeltavaa, kun työskentelet emoliitin ensimmäisen tason lasten kanssa. Jos esimerkiksi haluat valita ensimmäisen tasoluettelon kohteet järjestämättömältä luettelolta, joka näyttää tältä:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Käytettäisiin tätä valitsinta, koska tavallinen AB- valitsin valitsi myös sisäkkäisen järjestämättömän luettelon sisältämät listat
ul > li {background: black;color: white;}Tämä on todella hyvä valitsin, kun haluat muotoilla tietyn linkin eri tavalla, mitä tahansa lainausmerkinnöissä sovitetaan yhteen linkin hrefin kanssa. Esimerkiksi kaikki linkit Facebookiin, joissa on sininen väri, käytät:
a[href*="facebook"] {color: blue;}Myös versiota *, joka vastaa tarkkaa URL-osoitetta, jota voit käyttää täsmällisiin linkkeihin.
Tämä valitsin, jos se on erityisen hyödyllinen siksi, että se on kieltolauseke, jonka avulla voit valita minkä tahansa elementtiryhmän, joka ei vastaa sitä, mitä sijoitat B: hen. Jos haluat valita jokaisen div ilman alatunnistetta, jota tarvitset vain:
div:not(.footer) {margin-bottom: 40px;}Ensimmäisen lapsen ja viimeisen lapsen avulla voimme valita vanhemman elementin ensimmäisen ja viimeisen lapsen. Tämä voi olla suuri apu, kun kyse on listan kohteista ja marginaalin oikeasta reunasta tai reunuksista. Jos haluat poistaa ensimmäisen listan kohteen reunan ja viimeisen luettelokohteen marginaalin, tarvitset:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}Neljäs lapsi on yksinkertainen tapa valita jokin elementin lapsi sen järjestyksessä. Jos esimerkiksi halusit kolmannen luettelon kohteen järjestämättömälle luettelolle, tämä olisi tapa lähteä:
ul li:nth-child(3) {background: #ccc;}Voimme käyttää n: ää lapsia valitsemaan jonkin numeron kerroin käyttämällä muuttujaa n, esimerkiksi jos annamme 3n, se valitsee listan kohteen numeron 3, 6, 9, 12 ja niin edelleen.
N: nnen viimeisen lapsen kaltainen nth-lapsi toimii, mutta sen sijaan, että laskettaisiin ensimmäisen luettelon kohteen, jonka aloitus lasketaan viimeisestä, niin jos käytät sitä numerolla kaksi, se valitsee luettelon, joka tulee edellisen kerran ja sen käyttö on aivan kuin n: n lapsivalitsin:
ul li:nth-last-child(2) {background: #ccc;}Tämä valitsin tekee juuri sitä, mitä mieltä olette; se näkee minkälaisen elementin, jonka olet määrittänyt, ja valitsee esimerkiksi sivusi kolmannen elementin, joka vastaa kirjoittamasi. Jos valitset divisioonan kolmannen kohdan, käytät:
div p:nth-of-type(3) {font-style: italic;}Oletko koskaan huomannut, että kun etsit jotain Googlessa, jo näkyvät sivut näkyvät eri värissä? Juuri näin käy. Tämä on hieno lisä käyttäjille, mutta se on joskus unohtunut ja kokemukseni mukaan se on kätevä joka kerta, kun etsin googlea.
a:visited {color: blue;}Minun kokemuksessani tällaisia valitsimia käytettäessä koodaus voi säästää meidät paljon aikaa ja myös välttää tarpeet, että monet ID: n nurkistavat merkintäämme. Ja tämä on vain CSS-valitsimien alku, on paljon valitsimia, jotka ovat todella käteviä mutta joskus unohdettuja.
Käytätkö CSS-valitsimia tyyliarkeissasi? Onko helpompi palata tunnisteisiin ja luokkiin? Kerro meille kommentit.