CSS selektorji in njihove vrste

CSS selektorji so posebna struktura CSS, ki vam omogoča, da izberete določen element v HTML kodi in ga stilizirate. Vsak od njih ima svojo specifičnost, torej se lahko prekriva z lastnostmi drugih, bolj "šibke".

CSS selektor po oznaki in razredu

Najenostavnejši selektorji - po oznaki in razredu. Izbirnik na oznaki je najpogostejši in izbere vse elemente z določeno oznako. Na primer, lahko zapišete lastnosti kode CSS v naslednji obliki: p {color: blue} ", kjer je" p "oznaka odstavka in barva: blue lastnost označuje barvo besedila. Zato bo besedilo v odstavkih v modri barvi. Selektorji po oznakah se lahko štejejo skozi vejico, potem pa ni potrebno dvakrat zapisati lastnosti.


Če se nekaterim razredom dodeli določen razred, na primer "modri", se lahko CSS selektor prilagodi še natančneje. Toda njegov vnos v lastnostih bo drugačen - točka se bo pojavila pred imenom razreda. To pomeni, da izberete vse odstavke, ki so dodeljeni modrem razredu in jih obarvate v modro, lastnosti CSS zapišite tako: ".blue: {color: blue}". Ta izbirnik je bolj specifičen od izbirnika CSS z oznako in je močnejši od njega, vendar je najpreprostejši. Obstaja bolj zapletena pravila, ki vam omogočajo izbiro manjših skupin elementov.

Značilnosti selektorjev z identifikatorjem

Selektorji za id ali id ​​so bolj specifični kot razred in atribut. To pomeni, da ko se uporabljajo v kaskadi, bodo "presegli" druge podobne selektorje. Identifikatorji vam prav tako pomagajo natančno izbratidoločen element v kodi, vendar se njihova uporaba pri oblikovanju strani šteje za slabo prakso med načrtovalci. Le v zelo redkih primerih, kot je ustvarjanje drsnika na CSS, je ta praksa nesprejemljiva. Dejstvo je, da je znotraj ene strani lahko samo en element z določenim id. Zato se zaradi edinstvenosti izbirnika id-ja CSS lahko uporablja samo za en sam element. V tem primeru je veliko bolj logično uporabiti razrede, ne identifikatorjev.

Različne misli o selektorju po id

Vendar pa obstaja tudi nasprotno stališče, da identifikator pomaga identificirati odrezek kode na strani, ki bi morala biti v enem samem primeru. V tem primeru, čeprav ga lahko zamenjajo razredna stikala, jih je treba uporabiti za večje skupine elementov, v tistih krajih, kjer je potrebna natančnost, je bolje uporabiti id. Vsaka obrtnica ima pravico razviti svoje osebno mnenje o temi in napisati kodo v svojem slogu. Pri pisanju izbirnika z id, se pred njim uporablja simbol "#". To pomeni, da bo vrstica kode izgledala takole: "#blue: {color: blue}". S tem vnosom bo element z ID # plavo obarvan modro.

Uporaba kaskade

Pri uporabi HTML CSS selektorjev na id lahko uporabite tudi kaskadno lastnost. Na primer, če je znotraj oznake z identifikatorjem, ki ga želite izbrati otroško oznako in spremeniti njene lastnosti, morate najprej zapisati ime ID z mrežo, nato otroško oznako in njene lastnosti.Ti selektorji se imenujejo ugnezdeni. To pomeni, da bo kodna linija izgledala takole: #id p {color: blue}. Potem se bo barva besedila znotraj nadrejenega elementa s tem identifikatorjem v odstavku podrejene spremenila v modro.

Uporaba selektorjev podrejenih elementov

Druga možnost za uporabo kaskade za spreminjanje lastnosti podrejenih elementov se uporablja, če morate le izbrati določen del kode. Imenuje se tudi selektor potomcev. Če želite na primer izbrati odstavek v vrstici tabele, uporabite naslednji vnos za izbirnik CSS: "ul li & gt; p: {color: blue} ". Pri tem je treba upoštevati dejstvo, da dlje kot je zapis, večja je verjetnost, da bo mogoče spremeniti neko specifično lastnost elementa, saj postane kaskada bolj prednostna. Elementi z nekaterimi drugimi lastnostmi nadrejenega izbirnika CSS na primer ne bodo spremenili svojih lastnosti v celoti. Obarvan je samo določen del besedila znotraj seznama.

Izbor sestrskih elementov

Še en zanimiv način uporabe kaskadnih - naslednji selektorji CSS. Zabeleženi so kot vsota selektorjev: "span + a {color blue}". V tem primeru je sosed tisti, pod katerim je še en, ki ustreza zahtevanim parametrom. Torej, če obstajajo trije elementi v kodi, potem lastnost ne velja za prvo, ker nima soseda, in za vse naslednje - tako. To se zgodi prek ikone za količino, ko so ustvarjeni naslednji selektorji, ne pa prejšnji. Ta vnos pomaga zmanjšati kodo in ne zapisuje več CSS selektorjev za različneuporabljajo iste lastnosti. Če druga postavka na seznamu podaja dodatni razred in je vnos spremenjen v .class + a {color blue}, se odštevanje odšteje od njega in lastnosti se bodo spremenile v naslednjih elementih pravila vgradnje, prva dva pa bosta ostala nespremenjena.

Predpostavimo, da v naši kodi obstajajo tri enake oznake z različnimi razredi in morate po določenem določiti vse elemente. V tem primeru uporaba samo selektorjev oznak CSS ne bo delovala. V ta namen se uporablja izbirnik naslednje vrste: ".class ~ div". S tem izberete elemente z oznako div, ki sledijo določenemu razredu. Če želimo izbrati ne le elemente z oznako div, temveč vse naslednje, namesto oznake za znakom tilde morate postaviti znak zvezdice - "*". Takšen zapis pomeni, da morate izbrati vse, kar sledi po danem razredu. Vse elemente na strani lahko izberete, če pustite zvezdico kot izbirnik.

Selektorji atributov CSS

Predpostavimo, da naša koda vsebuje elemente z nekaterimi atributi, vendar se vsi razlikujejo med seboj in se zapišejo z vezajem, zato moramo izbrati tiste, v katerih se ime razreda začne z določeno besedo, na primer, "izbirnik" in razredi so ločeni z znakom "-". Kaj naj storim v tem primeru? Izbirni vnos se začne s oglatimi oklepaji, kjer je ime atributa najprej zapisano, nato navpična poševnica, znak "=" in "izbirnik": "data- | = selektor". Nato napišemo želeno lastnost, ki jo želimo spremeniti. Posledično je predmet izbran z danimiparametrov. S spreminjanjem razredov lahko spremenite lastnosti določenih delov kode. Če se imena razredov ne zapišejo z vezajem, ampak z eno besedo, jih lahko tudi izberete, vendar z rahlo drugačnim zapisom. V tem primeru se navpična poševnica nadomesti s simbolom "^": "data ^ = selector". Ta izbirnik izbere podniz z začetkom imena razreda.

Kako izbrati element z določenim koncem v imenu razreda

Zdaj bomo naredili drugače in izbrali del kode ne od začetka opisa razreda, temveč z zadnjimi črkami v njegovem imenu. Za to potrebujemo značko za dolar. Postavimo jo na kljukico in po znaku enakosti zapišemo konec imena razreda: "data $ = ctor". Zdaj bodo izbrani elementi s to kombinacijo črk in zanje bodo določene določene lastnosti. Izberete lahko kateri koli atribut. Poglejmo, kako narediti, če moramo sredi besede poiskati element z nekakšno kombinacijo črk. V tem primeru spreminjamo znak za dolar na zvezdico in za znakom enakosti pišemo črke: "data * = ct".

Psevdo-razredi - posebni selektorji

Izbirniki po meri CSS-a se običajno uporabljajo za povezave, ki odražajo njihove različne razmere: miren, v fokusu, aktiven, opravljen - se imenujejo psevdo-razredi. Psevdo-razred za aktivno povezavo, na katero je kazalec prikazan, je napisan kot "a: aktivno." Naslednje so nekatere lastnosti, najpogosteje se spremeni ozadje ali doda senca. Če dodate to lastnost v povezavo in jo kliknete, bo spremenila barvo v dano. Še en psevdo-razred hover kaže, da je povezava že potekla.Zabeleži se kot "a: hover".

Značilnosti aktivnih in osredotočenih stanj

Aktivno se pogosto zamenjuje z drugim stanjem - stanjem. Piše na naslednji način: "a: focus" in označuje aktivno stanje gumba pri delu s tipkovnico. Če uporabite tipko TABLES, bo aktivna povezava označena v posebni barvi. To lastnost je treba uporabiti, saj z miško za krmarjenje po spletnem mestu morda ne bodo vsi uporabniki. Nekateri imajo lahko slab vid ali druge zdravstvene omejitve, zato se premikajo po strani s pomočjo tipk ali posebnih pripomočkov. Neupoštevanje statusa gumba v ospredju je velika pomanjkljivost takšnega parametra pri oblikovanju mesta, kot je dostopnost, in ima velik vpliv na njegovo prisotnost s posebno kategorijo uporabnikov. Pri navadni navigaciji z miško postane povezava aktivna in izostrena. Zato je pri oblikovanju elementov pri tem pomembno paziti na to.

Psevdoelementi

Psevdoelementi vam omogočajo, da določite posebne sloge, ne da bi jih definirali v sami strukturi HTML-ja. Zabeleženi so na naslednji način: ime izbirnika, znak "::", ime psevdoelementa. Najpogostejši elementi "pred" in "po". Imajo lastnost "vsebine", ne morejo se uporabljati za notranje sloge. "After" je potreben za dodajanje vsebine po vsebini določene postavke. Kaj točno vstaviti je zapisano v lastnost "vsebine". Podobno psevdoelement "pred" doda vsebino vsebini elementa. Uporaba teh posebnih selektorjev vam omogoča, da zmanjšate kodo in ne pišete vedno novegastrukturo za njen del, če želite dodati določeno podrobnost na določeno mesto posode. Pogosto se uporabljajo pri oblikovanju strani in dodajanju nekaterih dekorativnih elementov. Kombinacije vseh teh možnosti pomagajo ustvariti nenavadne učinke na strani in v veliko pomoč obrtniku.

Sorodne publikacije