: tarča - CSS-triki | Almanah CSS 2025

:targetSelektor psevdo v CSS tekmah, ko so hash v URL in id elementa enaka. Na primer, če je trenutni URL:

https://css-tricks.com/#voters

In to je obstajalo v HTML-ju:

 Content

Ta izbirnik bi se ujemal:

:target ( background: yellow; )

In ta sectionelement bi imel rumeno ozadje.

S tem generičnim izbirnikom (ki se ujema z vsem, kar je ciljno), če bi se URL spremenil, da se konča, #faqin bi bil drug element z ID-jem faq, bi se izbirnik znova ujemal in #faqelement bi imel rumeno ozadje.

Lahko ga omejite tako, da natančno določite elemente, na katere želite ciljati

#voters:target ( )

Kdaj bi to uporabil?

Ena od možnosti je, če želite slog s stanji. Ko ima stran določeno razpršitev, je v tem stanju. Ni povsem tako vsestranski kot manipuliranje imen razredov (ker je lahko samo en in je lahko povezan samo z enim elementom), vendar je podobno. Vse, kar lahko naredite s spreminjanjem razreda za spremembo stanja, lahko storite, ko je element v njem :target. Na primer: spremenite barve, spremenite položaj, spremenite slike, skrijete / pokažete stvari, kar koli.

Ta pravilnik bi uporabil, kdaj :targetje dobra izbira:

Kadar je potrebna "država"
Kadar je vedenje preskoka / razpršene povezave sprejemljivo
Kdaj je sprejemljivo vplivati na zgodovino brskalnika

Kako dobite razpršitve v URL-jih?

Najpogostejši način je, da uporabnik klikne povezavo, ki vključuje zgoščeno besedilo. Lahko je notranja povezava (na isti strani) ali popolnoma kvalificiran URL, ki se konča s zgoščeno in vrednostjo. Primeri:

Go To There Go To There

Skakalno vedenje

Ne glede na to, ali gre za povezavo do iste strani ali ne, je obnašanje brskalnika pomikanje po strani, dokler ta element ni na vrhu strani . Ali kolikor je le mogoče, če se ne more tako daleč pomakniti. To je precej pomembno vedeti, ker pomeni, da je izkoriščanje tega "navedenega" vedenja nekoliko zapleteno / omejeno.

Na primer, nekoč sem preizkusil različne tehnike za kopiranje funkcionalnih zavihkov CSS, vendar sem se na koncu odločil, da je bila uporaba kvačilnega polja boljša ideja, ker se je izognila težavam s preskakovanjem strani. Ian Hansson iz CSS Science ima tudi nekaj primerov zavihkov. Njegov tretji primer uporablja :targetin absolutno postavljene elemente, skrite nad vrhom strani, da prepreči vedenje preskakovanja strani. Je pametna, a na splošno popolna rešitev, ker bi to pomenilo, da bi stran skočila navzgor, če bi bili jezički na strani nižje.

Več informacij

Članek tukaj o CSS-trikih: Na: cilj
Izbirniki 4. stopnja spec
Preprosta galerija slik z uporabo: target (trpi zaradi preskakovanja strani, dober primer tega) Chrisa Heilmanna
Predstavitev tehnike rumenega bledenja (čeprav za obstoječo vsebino in ne na novo dodane vsebine) iz prenosnika Web Designer.
Cilj CSS, dobesedno, Caleb Ogden.
CSS: cilj za zaslone zunaj zaslona
Dokumenti MDN