Izbiralci CSS. Vrste selektorjev

Jezik za opisovanje dokumenta CSS se nenehno razvija. Sčasoma narašča ne le njegova moč in funkcionalnost, ampak tudi povečuje prilagodljivost in enostavnost uporabe.

CSS selektorji

Začnimo razumeti. Odprite vse vaje CSS, vsaj en razdelek v njem bo namenjen tipom selektorjev. To ni presenetljivo, saj so eden od najbolj primernih načinov upravljanja vsebine strani. Z njihovo pomočjo lahko komunicirate z vsemi elementi HTML. Sedaj obstaja 7 vrst selektorjev:


  • za oznake;
  • za razrede;
  • za identifikacijsko številko;
  • univerzalna;
  • atributi;
  • za interakcijo s psevdo-razredi;
  • za nadzor psevdoelementov.
  • Sintaksa je preprosta. Če želite izvedeti, kako uporabljati CSS selektorje, je dovolj, da o njih preberete. Katera možnost je najboljša za nadzor vsebine v vašem primeru? Poskusimo ugotoviti.

    Izbirniki oznak

    To je najbolj preprosta možnost, ki za pisanje ne zahteva posebnega znanja. Za upravljanje oznak morate uporabiti njihovo ime. Predpostavimo, da je "glava" vašega spletnega mesta zavita v oznako. Če ga želite uporabiti v CSS, morate uporabiti izbirnik glave {}. Prednosti - enostavnost uporabe, vsestranskost. Slabosti - popolno pomanjkanje prožnosti. V zgornjem primeru bodo takoj označene vse oznake glave. In kaj, če morate upravljati samo enega?

    Izbirniki razreda

    Najpogostejša različica. Dodeljenoza upravljanje oznak z atributom razreda. V vaši kodi so na primer trije bloki, od katerih vsak zahteva določeno barvo. Kako to storiti? Standardni CSS selektorji niso primerni za oznake, določajo parametre za vse bloke naenkrat. Izhod je preprost. Dodeli elemente razreda. Na primer, prvi div je dobil razred = 'rdeč', drugi - razred = 'modri', tretji - razred = 'zelen'. Zdaj jih lahko izberete s pomočjo CSS.


    Sintaksa je: točka točke ("."), Po kateri napišemo ime razreda. Za upravljanje prvega bloka uporabljamo zasnovo .red. Druga je .plava in tako naprej. Pomembno! Priporočljivo je, da uporabite jasne vrednosti atributa razreda. Slab ton je uporaba transliteracije (npr. Krasiviy-blok) ali naključne kombinacije črk /številk (ojfh834871). V takšni kodi boste zagotovo zmedeni, da ne omenjamo težav, s katerimi se boste morali soočiti s tistimi, ki bodo sodelovali v projektu po vas. Najboljša možnost je uporaba neke metodologije, kot je BEM.
    Prednosti - dokaj visoka prilagodljivost. Slabosti - lahko obstaja en in isti razred v več elementih, kar pomeni, da bodo urejeni hkrati. Problem je rešen z metodologijo in dedovanjem predprocesorjev. Bodite prepričani, da obvladujete manj, sass ali katerikoli drug predprocesor, ki bo močno poenostavil delo.

    Selector by ID

    V zvezi s to možnostjo so mnenja oblikovalcev in programerjev dvoumna. Nekateri vadnice CSS običajno ne priporočajo uporabe ID-ja, ker se ne uporabljajo previdnolahko povzročijo težave z dedovanjem. Vendar pa jih mnogi strokovnjaki aktivno razporedijo po celotni oznaki. Odločite se za vas Sintaksa je: simbol rešetke ("#"), nato ime bloka. Na primer, #red.
    ID se razlikuje od razreda za več parametrov. Najprej stran nima dveh identičnih ID-jev. Dodeljujejo jim edinstvena imena. Drugič, tak selektor ima višjo prednost. To pomeni, da če razred uvrstite v rdeči razred in določite rdečo barvo ozadja v tabelah CSS, nato pa mu dodelite modro barvo in določite modro barvo, bo blok postal modri. Prednosti - določen element lahko upravljate brez upoštevanja sloga za oznake in razrede. Slabosti se zlahka zamenjujejo z velikim številom ID-jev in razredov. Pomembno! Če uporabljate metodo BEM (ali njene protipostavke), običajno ID-ja ne potrebujete. Ta tehnika postavitve vključuje uporabo edinstvenih razredov, kar je veliko bolj priročno.

    Univerzalni izbirnik

    Sintaksa: zvezdica ("*") in kodrasti oklepaji, tj * {}. Uporablja se za dodelitev določenih atributov vsem elementom strani hkrati. Kdaj je to potrebno? Na primer, če želite nastaviti lastnost velikosti strani box-sizing: border-box. Lahko se uporablja ne samo za upravljanje vseh komponent dokumenta, temveč tudi za nadzor nad vsemi podrejenimi elementi bloka, na primer, div * {}.
    Prednosti - lahko upravljate veliko število elementov hkrati. Slabosti -ni dovolj prožna. Poleg tega uporaba tega izbirnika v nekaterih primerih upočasni delo na strani.

    Z atributi

    Omogoča nadzor elementa z določenim atributom. Na primer, imate več vhodnih oznak z drugačnim atributom tipa. Eden od njih - besedilo, drugo - geslo, tretje - številka. Seveda lahko vsak razred ali ID, vendar to ni vedno priročno. CSS selektorji dajejo atributom možnost, da določijo vrednosti za določene oznake z največjo natančnostjo. Na primer, tukaj je kako: input [type = 'text'] {} Ta izbirnik atributov izbere vse besedilo vhodnega tipa. Orodje je zelo prilagodljivo in ga lahko uporabljate z vsemi oznakami, ki imajo lahko atribute. Toda to ni vse! CSS specifikacija ima sposobnost krmiljenja elementov tudi z veliko udobja!
    Predstavljajte si, da ima vaša stran vnos s atributom placeholder = "Vnesite ime" in vnesite placeholder = "Vnesite geslo". Lahko jih izberete tudi z izbirnikom! Za to se uporablja naslednja oblika: input [placeholder = "Enter name"] {} ali input [placeholder = "Enter password"] Bolj prilagodljivo delo z atributi. Recimo, da imate na primer več oznak s podobnimi atributi (npr. »Kaspijsko« in »Kaspijsko«). Če želite izbrati oba, uporabimo naslednje izbirnike: [title * = "kaspiisk"] CSS bo izbral vse elemente v naslovu, ki vsebujejo "kaspijske" znake, tj. Izberete lahko tudi oznake, katerih atributi se začnejo z določenimi znaki: [title ^ = «znak, ki ga želite«] {} ali se konča z njimi:[title $ = "zahtevani znak"] {}. Prednosti - največja prilagodljivost. Izberete lahko vse obstoječe elemente strani brez težav z razredi. Slabosti - uporabljajo se razmeroma redko, le v posebnih primerih. Mnogi načrtovalci raje uporabljajo metodologijo, saj je lažje določiti razred, kot pa urediti več oglatih oklepajev in označiti "eno". Poleg tega ti selektorji ne delujejo v Internet Explorerju 7 in spodaj. Kdo zdaj potrebuje stari Internet Explorer?

    Selektorji psevdoklasa

    Psevdo-razred označuje stanje elementa. Na primer: hover - kaj se zgodi z delom strani, ko premikate kazalko,: obiskana - obiskana povezava. Ti vključujejo elemente, kot so: prvi otrok: zadnji otrok.
    Ta vrsta selektorjev se aktivno uporablja v trenutni postavitvi, ker vam omogoča, da naredite stran "v živo" brez uporabe javascripta. Na primer, se prepričajte, da se bo ob kliku na gumb z razredom btn spremenila njegova barva. V ta namen uporabite naslednjo obliko: .btn: hover {barva ozadja: rdeča; } Za lepoto lahko v glavnih lastnostih tega gumba podate lastnost prehoda, na primer v 05 s - v tem primeru gumb ne utripa trenutno, temveč za pol sekunde. Prednosti - se aktivno uporabljajo za "revitalizacijo" strani. Enostavna uporaba. Slabosti - niso. To je zelo priročno orodje. Vendar pa lahko neizkušene izvajalce zamešate z velikim številom psevdo-razredov. Problem rešujemo z usposabljanjem in prakso.

    Psevdoelementni selektorji

    so "psevdomelementi"Deli strani, ki niso v HTML-ju, vendar jih lahko upravljate. Ničesar nisi razumel? Vse je lažje, kot se zdi. Na primer, želite, da je prva črka v vrstici velika in rdeča, drugo besedilo pa ostane majhno in črno. Seveda lahko to črko razporedite z določenim razredom, vendar je dolga in dolgočasna. Veliko lažje je izbrati celoten odstavek in uporabiti psevdoelement :: prvo črko. Omogoča nadzor nad izgledom prve črke. Obstaja precej veliko število psevdo celic. Navedite jih, ker je malo verjetno, da se bo pojavil en članek. Ustrezne informacije lahko najdete v priljubljenem iskalniku. Prednosti - omogočajo fleksibilno prilagajanje videza strani. Slabosti - začetnike pogosto zamenjujejo. Veliko izbirnikov te vrste deluje samo v nekaterih brskalnikih.

    Povzamemo

    Izbirnik je močno orodje za nadzor pretoka dokumenta. Zahvaljujoč mu lahko izberete absolutno vsako komponento strani (tudi obstoječe le pogojno). Bodite prepričani, da preučite vse obstoječe možnosti ali jih vsaj zapišite. To je še posebej pomembno, če ustvarjamo kompleksne strani z modernim dizajnom in velikim številom interaktivnih elementov.

    Sorodne publikacije