: sihtmärk - CSS-trikid | CSS-i almanahh 2025

:targetPseudo valijat CSS sobib kui hash URL ja id elemendi on samad. Näiteks kui praegune URL on:

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

Ja see oli olemas HTML-is:

 Content

See valik sobiks:

:target ( background: yellow; )

Ja sellel sectionelemendil oleks kollane taust.

Selle üldise valijaga (mis sobib kõigega, mis juhtumisi on sihtmärk), kui URL muutuks lõpuni #faqja oleks veel üks ID-ga element, faqsobiks see valija uuesti ja #faqelemendil oleks kollane taust.

Saate seda piirata, täpsustades konkreetselt elemente, mida soovite sihtida

#voters:target ( )

Millal te seda kasutaksite?

Üks võimalus on see, kui soovite stiili olekutega. Kui lehel on kindel räsi, on see selles olekus. See pole nii mitmekülgne kui klassinimedega manipuleerimine (kuna neid võib olla ainult üks ja see võib olla seotud ainult ühe elemendiga), kuid see on sarnane. Kõik, mida saaksite teha klassi muutmiseks oleku muutmiseks, võiksite teha siis, kui element on sees :target. Näiteks: muuta värve, muuta asukohta, muuta pilte, peita / näidata asju, mida iganes.

Millal :targeton hea valik, kasutaksin neid rusikareegleid :

Kui on vaja “riiki”
Kui allapoole / räsi-lingi käitumine on vastuvõetav
Kui brauseri ajaloo mõjutamine on vastuvõetav

Kuidas saate URL-ide räsi?

Kõige tavalisem viis on see, kui kasutaja klõpsab linki, mis sisaldab räsi. See võib olla sisemine (samal lehel olev) link või täielikult kvalifitseeritud URL, mis lõpeb räsi ja väärtusega. Näited:

Go To There Go To There

Hüppekäitumine

Sõltumata sellest, kas see on sama lehe link või mitte, on brauseri käitumine selline, et sirvige lehte, kuni see element on lehe ülaosas . Või niipalju kui võimalik, kui ta nii kaugele kerida ei suuda. Seda on pigem oluline teada, sest see tähendab, et selle "väidetud" käitumise kasutamine on natuke keeruline / piiratud.

Näiteks proovisin kord funktsionaalsete CSS-i vahekaartide kopeerimiseks mitmesuguseid tehnikaid, kuid lõpuks otsustasin, et märkeruutude häkkimine on parem idee, kuna see väldib lehtede hüppamise probleeme. Ian Hansson CSS Science'is pakub ka vahekaartide näiteid. Tema kolmas näide kasutab :targetlehe hüppamise vältimiseks lehe ülaosa kohal peidetud absoluutselt paigutatud elemente. See on nutikas, kuid üldiselt täiuslik lahendus, sest see tähendaks, et leht hüppaks ülespoole, kui vahelehed oleksid lehel allpool.

Rohkem informatsiooni

Artikkel siin CSS-trikkide kohta: Sees: sihtmärk
Valijad 4. taseme spec
Lihtne pildigalerii, kasutades Chris Heilmanni: target (kannatab lehtede hüppamise asja, hea näide sellest)
Kollase tuhmumistehnika (kuigi olemasoleva sisu, mitte äsja lisatud sisu) demo Web Designeri märkmikust.
CSS Target, sõna otseses mõttes, autor Caleb Ogden.
CSS: ekraaniväliste kujunduste sihtmärk
MDN-i dokumendid