无法在 Chrome DevTools 样式面板中更改 tr 元素的背景颜色答案

【问题标题】：Cannot change background-color of tr element in Chrome DevTools Styles panel无法在 Chrome DevTools 样式面板中更改 tr 元素的背景颜色
【发布时间】：2017-04-22 18:47:08
【问题描述】：

我有以下 HTML：

...
<tr role="row" class="odd">
  <td width="70" ...
  <td class=" customHoverEnabled" ...
  <td ...
  <td class="text-right" ...
  <td class="last-child text-right" ...
</tr>
...

我无法使用 Chrome (canary) DevTools 中的样式面板更改 tr 标记的 background-color 属性，如下所示：

让我感到困惑的是：element.style 对元素应用什么样式没有最终决定权吗？它不应该能够覆盖之前应用的任何内容吗？

当我为内部 td 元素设置 element.style 样式时，它会起作用，并且背景颜色会发生变化。

我该如何理解这个问题？有解决办法吗？

【问题讨论】：

标签： css html-table google-chrome-devtools

【解决方案1】：

您的td 元素是否定义了背景颜色？因为tr 围绕着这些，如果他们这样做，你不一定会看到tr 背景。尝试将 td 元素上的样式设置为 background-color: transparent; 如果不是这样，您能否提供一个代码 sn-p 示例？

【讨论】：

谢谢！就是这样。不幸的是，我只能为你投票一次！

【解决方案2】：

我可以看到您正在使用 Bootstrap，Bootstrap 带有从内存中开箱即用的表格样式。不，element.style 没有最终决定权，如果您谈论 JavaScript（例如 element.style.display），我会说您是正确的。

【讨论】：