Jak dodać styl CSS do skupionego kotwicy w HTML

Question

na stronie 1 znajduje się link, który przeniesie Cię do pewnego punktu na stronie 2

<a href="page2.html#position">MY TEXT HERE</a>

To zabierze Cię prosto do kotwicy (pozycja) na strona 2 o następującym kodzie:

<a name="position"> MORE TEXT HERE</a> 

Moje pytanie brzmi: jak mogę zmienić kolor tekstu i tła, gdy #position znajduje się w adresie URL?

Na przykład: www.domainname.com/page2.html#position

To CSS użyłem, ale nie działa:

#position { 
color:#ff0000; 
background-color:#f5f36e; 
} 

Oto przykład http://jsfiddle.net/jvtcj/2/

Z góry dziękuję!

Answer 1

Użyj wybieraka :target:

a:target, /* or simply */ 
:target { 
    /* CSS to style the focused/target element */ 
} 

Byłbyś lepiej wyłączyć za pomocą id danego elementu, aby otrzymać ostrość, ponieważ nazwanych kotwic wydają zostały wycofane, jeśli nie całkowicie przestarzałe.

Odniesienia:

• CSS selectors, level 3.

Answer 2

Spróbuj użyć

<a name="position" class="position"> MORE TEXT HERE</a> 

I w użyciu CSS

.position { 
color:#ff0000; 
background-color:#f5f36e; 
} 

http://jsfiddle.net/jvtcj/4/

Answer 3

Dodaj id do znacznika.

Można zobaczyć, jak się tutaj, podając przykład

http://jsfiddle.net/h5NZh/

<a id="position" href="#position">MY TEXT HERE</a> 

Answer 4

Można użyć CSS3 selektor :target peseudo: http://blog.teamtreehouse.com/stay-on-target

Ponadto, nie należy używać starego mitu <a name="destination">...</a> wszystko potrzebujesz do id sekcji, do której chcesz przejść, np <section id="destination">...</section>

Answer 5

<a href="#position2" id="position">MY TEXT HERE</a> 
... 
<a name="position2" id="pos2"> MORE TEXT HERE</a> 

... w CSS:

a[name=position2]:target{  
    background-color:green; 
}