làm cách nào để áp dụng quy tắc css cho phần trước và phần tử tiếp theo trong HTML?

Question

Ví dụ:

Bạn có thế này:

<ul> 
<li>zero</li> 
<li>one</li> 
<li class="selected">two</li> 
<li>three</li> 
<li>more elements</li> 
</ul> 

CSS:

.selected:previous { 
    color: red; 
} 

.selected:next { 
    color: green; 
} 

Đó là có thể?

Answer 1

Không thể với css thuần túy. Bạn có thể tạo kiểu phần tử tiếp theo nhưng không phải trước đó.

Nhưng bạn có thể làm một thủ thuật với css. Thay vì cho lớp được chọn, bạn có thể đặt lớp học cho phần tử trước đó của mình. Như thế này:

HTML

<ul> 
<li>zero</li> 
<li class="previous">one</li> 
<li>two</li> 
<li>three</li> 
<li>more elements</li> 
</ul> 

CSS

.previous{ 
    color: green; 
} 
.previous + li{ 
    color: red; 
} 
.previous + li + li{ 
    color:yellow; 
} 

Kiểm tra này http://jsfiddle.net/S5kUM/2/

Answer 2

Điều này sẽ phải được thực hiện bằng JavaScript.

Nếu bạn đang sử dụng jQuery, nó có thể được thực hiện như thế này:

$('.selected').prev().css('color', 'red'); 
$('.selected').next().css('color', 'green'); 

Answer 3

Nó được gọi là anh chị em chọn:

.selected + li { 
    color: red; 
} 

Fiddle here

Tuy nhiên, không có chọn anh chị em cho phần tử trước.

Answer 4

Bạn có thể sử dụng display: flex; và flex-direction: row-reverse; để đảo ngược danh sách.

http://codepen.io/bscherer/pen/XMgpbb