: cél - CSS-trükkök | CSS Almanach 2025

A :targetCSS álválasztója akkor egyezik, ha az URL-ben található hash és az elem azonosítója megegyezik. Például, ha a jelenlegi URL a következő:

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

És ez létezett a HTML-ben:

 Content

Ez a választó megfelel:

:target ( background: yellow; )

Ennek az sectionelemnek pedig sárga a háttere.

A kiválasztó azon általános használatával (amely megfelel bárkinek, ami történetesen a cél), ha az URL végére változik, #faqés van még egy elem, amelynek azonosítója van faq, akkor ez a választó ismét megfelel, és az #faqelem sárga háttérrel rendelkezik.

Korlátozhatja, ha konkrétan meghatározza, hogy mely elemeket szeretné megcélozni

#voters:target ( )

Mikor használja ezt?

Az egyik lehetőség az, amikor stílust akar "államokkal". Ha az oldal rendelkezik bizonyos kivonattal, akkor abban az állapotban van. Ez nem annyira sokoldalú, mint az osztálynevek manipulálása (mivel csak egy lehet, és csak egy elemhez köthető), de hasonló. Bármit megtehetsz egy osztály megváltoztatásával az állapot megváltoztatásához, amit megtehetsz, amikor az elem be van kapcsolva :target. Például: színek megváltoztatása, helyzet megváltoztatása, képek módosítása, dolgok elrejtése / megjelenítése, bármi.

Akkor használnám ezeket a hüvelykujj-szabályokat, amikor :targetjó a választás:

Amikor „államra” van szükség
Amikor az ugrás / hash-link viselkedés elfogadható
Amikor elfogadható a böngésző előzményeinek befolyásolása

Hogyan szerezhet kivonatokat az URL-ekben?

A leggyakoribb módszer az, hogy a felhasználó rákattint egy linkre, amely kivonatot tartalmaz. Lehet egy belső (ugyanazon az oldalon található) link vagy egy teljesen minősített URL, amely történetesen hash-val és értékkel végződik. Példák:

Go To There Go To There

Ugró magatartás

Függetlenül attól, hogy ugyanazon az oldalon található-e a link, vagy sem, a böngésző viselkedése görgeti az oldalt, amíg az elem nem jelenik meg az oldal tetején . Vagy amennyire csak lehet, ha nem tud addig görgetni. Ezt meglehetősen fontos tudni, mert ez azt jelenti, hogy a „kijelölt” viselkedés kiaknázása kissé trükkös / korlátozott.

Például egyszer már többféle technikát kipróbáltam a funkcionális CSS-lapok replikálásához, de végül úgy döntöttem, hogy a jelölőnégyzet feltörése jobb ötlet, mert elkerüli az oldalugrással kapcsolatos problémákat. Ian Hansson, a CSS Science munkatársa is mutat néhány példát a fülekre. Harmadik példája :targetaz oldal teteje fölé rejtett és abszolút elhelyezett elemeket használ az oldal ugrási viselkedésének megakadályozására. Okos, de összességében tökéletes megoldás, mert ez azt jelentené, hogy az oldal felfelé ugrana, ha a fülek lejjebb lennének egy oldalon.

Több információ

Cikk itt a CSS-trükkökről: Be: cél
Válogatók 4-es szintű specifikáció
Egyszerű képgaléria:: target (az oldalugrás dologtól szenved, ennek jó példája) Chris Heilmann segítségével
Sárga fakulási technika bemutatása (bár meglévő, nem újonnan hozzáadott tartalom esetén) a Web Designer Notebook-ból.
A CSS Target szó szerint Caleb Ogden.
CSS: cél a képernyőn kívüli tervekhez
MDN dokumentumok