2012-11-29 30 views
5

HTML của tôi trông như thế này ..Làm thế nào tôi có thể làm cho các yếu tố của mình làm mờ dần số đếm cao hơn?

<div class=chocolateSandwich> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
</div> 

Vì vậy, tôi muốn mục 5 là IE opacity có thể nhìn thấy ít nhất 0,1 và mục 1 có nói opacity 1 hoặc 0,9 .. Tôi có thể rõ ràng là nó dựa trên giá trị nó con số cho mỗi một mã cứng nhưng tôi cảm thấy như trong CSS có một cách để nói cho số lượng của đối tượng sau đó áp dụng một giá trị opacity thấp hơn.

Một giải pháp không thanh lịch sẽ có các quy tắc css ..

.chocolateSandwich:nth-child(4) { opacity:.1 } 
.chocolateSandwich:nth-child(3) { opacity:.3 } 
.chocolateSandwich:nth-child(2) { opacity:.5 } 
.chocolateSandwich:nth-child(1) { opacity:.7 } 
.chocolateSandwich:nth-child(0) { opacity:.9 } 
+1

Không, tôi không nghĩ điều này là có thể xảy ra. Ngoài ra, trong CSS, chỉ mục là 1-based (do đó, ': first-child' là': nnth-child (1) ', không phải là': nnth-child (0) '). –

+0

Ngoài ra nó sẽ là '.chocolateSandwich: nth-child (1)', lưu ý không gian. –

Trả lời

1

này không thể đạt được với CSS một mình, bạn có thể sử dụng CSS LESS và điều này sẽ trở nên rất dễ dàng. Nếu bạn không muốn sử dụng CSS LESS, bạn có thể sử dụng JavaScript hoặc jQuery.

Dưới đây là một liên kết: http://lesscss.org/

Nếu bạn không thể tìm nó ra, cho tôi biết và tôi sẽ viết mã trong LESS.

Chúc may mắn: D

Các vấn đề liên quan