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

Question

有这样一个元素：

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

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

我正在尝试编写一个 css 样式表来覆盖此样式（从前端，并且无法访问网站的后端）；但定义它的唯一方法是基于元素的实际内联样式，因为没有类或 ID。

我知道您可以通过以下方式为某些非 css 元素（例如表单name或for表单）定义 css：

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

那么我该如何根据风格来做到这一点呢？

score 3 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

2 回答 2