: target pseudo class не находит цель

Question

Я хочу изменить стиль элемента im my html с помощью: target pseudo class. Моя разметка (первый из них является кнопка, второй является целевой элемент):

<a id="btn01" href="#theTarget"><span class="adtb-orange"><span>Call to action</span></span></a> 

<div id="theTarget" class="col-lg-6">target</div> 

CSS-код:

#btn01:target { 
    background-color: #ff0000; 
} 

Это не работает, и я понятия не имею, почему. Может ли кто-нибудь помочь мне в этом? Спасибо.

Answer 1

Заменить класс CSS по:

#theTarget:target { 
    background-color: #ff0000; 
} 

Answer 2

:target не работает подобный. От MDN:

:target псевдо-класс представляет собой единственный элемент, если таковые имеются, идентификатор, соответствующий идентификатор фрагмента URI документа.

Короче говоря, вы должны иметь только один :target правила в вашем CSS, которые будут автоматически применяться при якоре нажатия:

:target { outline: solid red } /* draw a red, solid line around the target element */ 

jsFiddle Demo