表间梯度

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