CSS: style alle Elemente vor dem Schweben

Question

Ich versuche, alle Elemente vor dem Schweben (von der linken Seite) zu stylen.

Hier ist mein Code: jsFiddle

[CSS]:

a, 
a:link, 
a:hover, 
a:visited { 
    /* ... */ 
    color: #222; 
} 

a:hover, 
a:hover ~ a { 
    color: #f00; 
} 

[HTML]:

<a href="#">text1|</a> 
<a href="#">text2|</a> 
<a href="#">text3|</a> 

Alles, was ich getan habe, ist von der rechten Seite schwebt (nach schwebten Element), aber ich will es von links.

Answer 1

Eine kleine Änderung mit HTML und CSS können Sie Ihre Anforderung erfüllen.

HTML:

<div><a href="#">this/</a><a href="#">line/</a><a href="#">is/</a><a href="#">hovering/</a><a href="#">from/</a><a href="#">left/</a><div> 

CSS:

a, 
a:link, 
a:hover, 
a:visited, 
div { 
    text-decoration: none; 
    font-size: 14pt; 
    background: #def; 
    color: #222; 
} 
div:hover a{ 
    color: #f00; 
} 
a:hover ~ a { 
    color: #222; 
} 

jsFiddle

Answer 2

Möchten Sie alle Elemente anders stylen?

können Sie Elemente nach N-Kind-Selektor auswählen.

Beispiel:

a:nth-child(1){} 
a:first-child+a{} or a:nth-child(1) + a /* Second Element */ 
a:last-child{} /*select last child, Works in ie8+, webkit, moz, o */