: цел - CSS-трикове | CSS алманах 2025

В :targetселектора псевдо в CSS мачове, когато хеша в URL адреса и идентификационния номер на елемент, са едни и същи. Например, ако текущият URL е:

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

И това съществуваше в HTML:

 Content

Този селектор ще съответства:

:target ( background: yellow; )

И този sectionелемент ще има жълт фон.

С този общ за селектор (съвпадащ с всичко, което се случва като цел), ако URL адресът се промени, за да завърши #faqи има друг елемент с идентификатор faq, този селектор ще съвпадне отново и #faqелементът ще има жълт фон.

Можете да го ограничите, като конкретно посочите кои елементи искате да насочите, например

#voters:target ( )

Кога бихте използвали това?

Една от възможностите е, когато искате стил със „състояния“. Когато страницата има определен хеш, тя е в това състояние. Това не е толкова универсално, колкото манипулирането на имена на класове (тъй като може да има само едно и може да бъде свързано само с един елемент), но е подобно. Всичко, което бихте могли да направите, променяйки клас за промяна на състоянието, бихте могли да направите, когато елементът е в :target. Например: променете цветовете, променете позицията, променете изображенията, скрийте / покажете нещата, каквото и да е.

Бих използвал тези правила, когато :targetе добър избор:

Когато е необходима „държава“
Когато поведението за прескачане / хеш-връзка е приемливо
Когато е приемливо да се повлияе на историята на браузъра

Как получавате хешове в URL адреси?

Най-често срещаният начин е чрез потребител да щракне върху връзка, която включва хеш. Може да е вътрешна (една и съща страница) връзка или напълно квалифициран URL адрес, който случайно завършва с хеш и стойност. Примери:

Go To There Go To There

Скачащо поведение

Независимо дали става въпрос за връзка на една и съща страница или не, поведението на браузъра е превъртането на страницата, докато този елемент е в горната част на страницата . Или, доколкото може, ако не може да превърти толкова далеч. Това е доста важно да се знае, защото това означава, че използването на това „заявено“ поведение е малко сложно / ограничено.

Например, веднъж опитах различни техники за репликиране на функционални CSS раздели, но в крайна сметка реших, че използването на отметката е по-добра идея, тъй като избягва проблемите с прескачането на страници. Ян Хансон от CSS Science също има няколко примера за раздели. Третият му пример използва :targetи абсолютно позиционирани елементи, скрити над горната част на страницата, за да се предотврати поведението при прескачане на страницата. Това е умно, но като цяло перфектно решение, защото това би означавало, че страницата ще скочи нагоре, ако разделите бъдат надолу на страницата.

Повече информация

Статия тук за CSS-трикове: On: target
Селектори Ниво 4 спец
Една проста галерия с изображения, използвайки: target (страда от страничното прескачане, добър пример за това) от Chris Heilmann
Демонстрация на техниката на избледняване в жълто (макар и за съществуващо съдържание, а не за новодобавено съдържание) от Notebook на Web Designer.
CSS Target, буквално, от Caleb Ogden.
CSS: цел за проекти извън екрана
MDN документи