css: phong cách tất cả các yếu tố trước khi lơ lửng

Question

Tôi đang cố gắng tạo kiểu cho tất cả các phần tử trước khi di chuột (từ phía bên trái).

Đây là mã của tôi: 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> 

Tất cả tôi đã làm là lơ lửng từ phía bên phải (sau khi bay lượn phần tử), nhưng tôi muốn nó từ bên trái.

Answer 1

Một sự thay đổi nhỏ với html và css có thể đáp ứng yêu cầu của bạn.

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

Bạn có muốn tạo kiểu cho tất cả các phần tử khác nhau không?

bạn có thể chọn các phần tử theo bộ chọn thứ n-con.

Ví dụ:

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 */