表間梯度

Question

我有一個表格，用戶可以點擊選擇一個特定的單元格來選擇它。在點擊我應用CSS類<td>類是例如clicked

現在看起來是這樣的：

.clicked { 
    background: #43C6AC; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to left, #F8FFAE, #43C6AC); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to left, #F8FFAE, #43C6AC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 

} 

它返回是這樣的：

我會例如使梯度在附近的細胞上均勻一致，所以例如如果選擇4個細胞，則第一個應該是綠色並且最後是淡黃色。

我該怎麼做？我在想，也許最好的方法是讓表格全部漸變，如果沒有選擇，則應用白色背景。

這是最好的方法嗎？ 謝謝

Answer 1

我同意這是你最好的方法。最簡潔的方法是將漸變應用於整個表格或行，如您所述，並對所有未單擊的應用純白色的元素使用選擇器。該CSS看起來comething這樣的：

tr { 
    background: #43C6AC; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to left, #F8FFAE, #43C6AC); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to left, #F8FFAE, #43C6AC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 

} 

td:not(.clicked) { background: #fff; } 

JSFiddle