如何仅基于内联样式定义覆盖css？

Question

有一个像这样的元素：

<td style="border: 2px solid red; background: darkred;"></td>
<td style="border: 2px solid blue; background: darkblue;"></td>

唯一显示哪个是内联样式，我假设它们是基于后端的SQL查询定义的。

我正在尝试编写一个css样式表来覆盖这种样式（从前端开始，无法访问站点的后端）;但是定义它的唯一方法是基于元素的实际内联样式，因为没有类或id。

我知道您可以为表格中的某些非css元素定义css，例如name或for，如下所示：

td[name=thename] { /*css here */ }
td[for=thefor] { /*css here */ }

那我怎么能根据风格来做呢？

Answer 1

您可以在属性选择器中复制内联样式，然后使用!important规则覆盖它们，例如。

td[style="border: 2px solid blue; background: darkblue;"] {
    background: lightgray !important;
}

示例：http://jsfiddle.net/Dwew3/1/

Answer 2

对于较新的浏览器，您可以使用第n个子选择器，并将！important添加到样式。

td:nth-child(even) { background-color:blue !important; }
td:nth-child(odd) {background-color:black !important; }

我在这个fiddle中有一个例子。不幸的是，它在旧版浏览器中不起作用。如果你可以使用javascript或jQuery，你可以通过更好的浏览器支持来做同样的事情。