CSS selektorji. Vrste selektorjev

Jezik za opis videza dokumenta CSS se nenehno razvija. Sčasoma se poveča ne samo njegova moč in funkcionalnost, ampak tudi prožnost in enostavnost uporabe.

Izbirniki CSS

Začnimo razumeti. Odprite katero koli vadnico CSS, vsaj en del v njem se bo osredotočil na vrste selektorjev. To ni presenetljivo, saj so eden izmed najbolj priročnih načinov za upravljanje vsebine strani. S svojo pomočjo lahko interakcijo z vsemi elementi HTML. Sedaj je 7 tipov selektorjev:

• za tag-
• za razrede;
• za ID;
• univerzalni;
• atributi;
• za interakcijo s psevdo-razredi;
• za nadzor psevdo-elementov.

Sintaksa je preprosta. Če želite izvedeti, kako uporabljati CSS selektorji, samo berite o njih. Katere možnosti je bolje izbrati za nadzor vsebine v vašem primeru? Poskusimo razumeti.

Izbirniki oznak

To je najbolj preprosta možnost, ki za pisanje ne zahteva posebnega znanja. Če želite upravljati oznake, morate uporabiti njihovo ime. Recimo, da je "zgornja meja" vaše spletne strani zavit v oznako

Prednosti - enostavnost uporabe, vsestranskost.

Slabosti - popolno pomanjkanje prožnosti. V zgornjem primeru bodo hkrati izbrane vse oznake za glavo. In kaj, če potrebujete samo enega?

Izbirniki razreda

Najpogostejša možnost. Namenjen je upravljanju oznak z atributnim razredom. Recimo, da ima vaša koda tri bloke

Sintaksa je to: določite točko ("."), Po kateri napišemo ime razreda. Za upravljanje prvega bloka uporabite .red design. Drugi je .blue in tako naprej.

Pomembno! Priporočljivo je, da za atribut razreda uporabite jasne vrednosti. Slaba oblika je uporaba translita (npr. Krasiviy-blok) ali naključne kombinacije črk / številk (ojfh834871). V takšni kodi boste gotovo zmedeni, da ne omenjam težav, s katerimi se bodo tisti, ki se bodo ukvarjali s projektom, po katerem se boste morali soočiti. Najboljša možnost je uporaba neke vrste metodologije, kot je BEM.

Prednosti so precej prožne.

Slabosti - več elementov ima lahko isti razred, zato jih bodo hkrati urejevali. Težava se reši z uporabo metodologije in dediščine predprocesorjev. Bodite prepričani, da obvladujete manj, sass ali kakšnega drugega predprocesorja, bodo veliko poenostavili delo.

Izbirnik po ID

O tej možnosti so mnenja kodirnika in programerjev dvoumna. Nekaj ​​vaj CSS na splošno ne priporočam uporabe ID, ker lahko povzročijo naključne težave, kadar se uporabljajo nenamerno. Vendar pa jih mnogi strokovnjaki aktivno razpošiljajo po celotnem označevanju. Na vas je odvisno. Sintaksa je: rehtrični znak ("#"), Nato ime bloka. Na primer, #red.

ID se razlikuje od razreda za več parametrov. Prvič, na strani ni več dveh identičnih strani ID. Imajo dodeljena edinstvena imena. Drugič, takšen selektor ima višjo prednost. To pomeni, da če daste blok razred rdeča in navedite v tabelah CSS rdeča barva ozadja, in ga nato postavite id blue in označi modro barvo, bo blok postal modro.

Prednosti - lahko nadzirate določen element in ne upoštevate slogov za oznake in razrede.

Slabosti - v velikem številu je lahko zmedeno ID in razred.

Pomembno! Če uporabljate metodologijo BEM (ali njene analogije), ID na splošno vam ni treba. Ta tehnika postavitve vključuje uporabo edinstvenih razredov, kar je veliko bolj priročno.

Univerzalni izbirnik

Sintaksa: zvezdni znak ("*") in zavihki, tj. *{}.

Uporablja se za dodelitev določenih atributov vsem elementom strani hkrati. Kdaj lahko pride v poštev? Če želite, na primer, nastaviti lastnost strani box-size: border-box. Uporablja se lahko ne le za upravljanje vseh sestavnih delov dokumenta, ampak tudi za nadzor vseh otrok posameznega bloka, na primer, div * {}.

Prednosti - lahko hkrati upravljate s številnimi predmeti.

Slabosti niso prilagodljiva možnost. Poleg tega uporaba tega izbirnika v nekaterih primerih upočasni stran.

Po atributih

Element s specifičnim atributom je mogoče nadzirati. Na primer, imate več vhodnih oznak z drugačnim atributom tipa. Eden od njih je besedilo, druga pa geslo, tretja številka. Seveda lahko določite vsak razred ali ID, vendar to ni vedno priročno. Izbirniki CSS po atributih omogočajo določitev vrednosti za določene oznake z največjo natančnostjo. Na primer:

vnos [tip = rsquo-textrsquo -] {}

Ta izbirnik atributov izbere vse vnose s tipom besedila.

Orodje je precej prilagodljivo, lahko ga uporabljate z vsemi oznakami, ki imajo lahko atribute. Ampak to ni vse! V specifikaciji CSS je mogoče upravljati elemente tudi z izjemno udobnostjo!

Predstavljajte si, da ima vaša stran vnos z lastnikom atributa = "Vnesi ime" in vnosnega mesta = "Vnesi geslo". Izberete jih lahko tudi s pomočjo izbirnika! Za to se uporablja naslednja konstrukcija:

vhod [krajišče = "Vnesi ime"] {} ali vnesite [placeholder = "Vpišite geslo"]

Možno je prožnejše delo z atributi. Recimo, da imate več oznak s podobnimi atributi (npr. "Kaspijski" in "Kaspijski"). Če želite izbrati obe, uporabite naslednje izbirnike:

[naslov * = "kaspiysk"]

CSS bo izbral vse elemente v naslovu, na katerem so simboli "Kaspijski", tj. "Kaspijski" in "Kaspijski".

Izberete lahko tudi oznake, katerih atributi se začnejo z določenimi znaki:

[title ^ = "lik, ki ga potrebujete"] {}

ali se konča z njimi:

[naslov $ = "želeni znak"] {}.

Prednosti - maksimalna fleksibilnost. Izberete lahko vse obstoječe elemente strani, ne da bi se spopadali z razredi.

Slabosti - se uporablja relativno redko, le v posebnih primerih. Mnogi oblikovalci postavijo raje metodologijo, saj je lažje določiti razred kot pa urediti več kvadratni oklepaj in znaki so "enaki". Poleg tega ti izbirniki ne delujejo v Internet Explorerju 7 ali nižji. Vendar, kdo zdaj potrebuje stari Internet Explorer?

Pseudo-razred selektorji

Pseudo-razred označuje stanje elementa. Na primer: lebdenje - kaj se zgodi z delom strani, ko se premaknete nad: obiskano - obiskano povezavo. Vključuje tudi elemente, kot so: prvi otrok in: zadnji otrok.

Ta tip selektorjev se aktivno uporablja v sodobni postavitvi, saj lahko zahvaljujoč tej strani naredite stran »v živo« brez uporabe jаvascripta. Na primer, želite to narediti tako, da se pri nihanju nad gumbom z razredom btn spremeni njena barva. Za to uporabimo naslednjo konstrukcijo:

.btn: hover {

barva ozadja: rdeča barva:

}

Za lepoto lahko lastnosti tega gumba določite v glavnih lastnostih tega gumba, npr. V 0,5-ih - v tem primeru gumb trenutno ne utripa, ampak pol ure.

Prednosti - se aktivno uporabljajo za "oživitev" strani. Enostaven za uporabo.

Slabosti - niso. To je res priročno orodje. Vendar pa se neizkušeni uredniki lahko zmedejo v številnih psevdokih razredih. Problem je rešen s študijem in prakso.

Pseudo-elementi selektorji

"Pseudo-elementi" so tisti deli strani, ki niso v HTML-ju, vendar jih je še vedno mogoče upravljati. Niste razumeli ničesar? Vse je preprostejše, kot se zdi. Na primer, želite narediti prvo črko v vrstici velika in rdeča, tako da ostane drugo besedilo majhno in črno. Seveda lahko to pismo obkrožite z določenim razredom, vendar je dolg in dolgčas. To je veliko lažje izbrati celoten odstavek in uporabiti :: pseudo-element prvega črka. Omogoča vam nadzor nad izgledom prve črke.

Obstaja precej število psevdodelcev. Če jih bo v okviru enega članka navedel, verjetno ne bo delovalo. Informacije najdete v svojem priljubljenem iskalniku.

Prednosti - omogočajo fleksibilno prilagajanje videza strani.

Slabosti - začetniki v njih so pogosto zmedeni. Veliko selektorjev te vrste deluje samo v nekaterih brskalnikih.

Sumimo

Izbirnik je močno orodje za krmiljenje pretoka dokumentov. Zahvaljujoč njemu lahko izberete povsem vsak element komponente (tudi obstoječa je le pogojna). Prepričajte se, ali so na voljo vse razpoložljive možnosti ali jih vsaj napišite. To je še posebej pomembno, če ustvarjate zapletene strani z modernim dizajnom in veliko interaktivnih elementov.