1 
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Opera test - css inheritance</title>
<style type="text/css">
/* theirs */
.theirs {
    background: #FF0000 url("http://www.wonderbackgrounds.com/glitter/backgrounds/glitter_background_b7.gif") repeat 0% 0%;
}
/* mine */
.mine {
    background-image: none;
    background: #FFC0C0;
}
</style>
</head>
<body>
<table border="1">
  <thead class="theirs">
    <tr class="theirs mine">
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot class="">
    <tr class="theirs mine">
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody class="theirs">
    <tr class="theirs mine">
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr class="theirs mine">
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
</body>

</html>

我试图覆盖 TR 的背景颜色，代码在 Chrome 上按预期工作，但在我们的目标浏览器 Opera 上却没有。

问题是，我如何在“我的”类中为 css 编写代码以摆脱背景图像。它在 Chrome 中工作并显示粉红色的单元格，但在 Opera 中它显示背景图像。

我无法更改其他 css，我想清除 url，但当 tbody 包含相同的类时，Opera 不想这样做。我将类从 tfoot 中取出，以表明它在这种情况下有效，但当类在 .

4

1 回答 1

3

查看代码，我发现您已将两个类都附加到 TRs 上。由于它们是 2 种相互冲突的样式，因此您依靠应用程序的顺序来获得您想要的效果。Chrome 似乎以与将选择器应用于元素的顺序相同的顺序应用样式。即 class='their mine' 导致 Chrome 应用他们的 CSS 然后用你的覆盖它。

就在上周，我读到它实际上并不是规范的一部分——应用样式的顺序完全取决于浏览器供应商。

考虑到这一点，您应该简单地更改您的 CSS，以便“我的”类具有与“他们的”类相同的属性 - 尽管需要进行必要的更改。

然后，您可以只给您的 TR 一个“他们的”或“我的”类别。

扩展我在下面留下的评论，您可以使用以下 html（取自链接中的示例页面）

<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Opera test - css inheritance</title>
<style type="text/css">
/* theirs */
.theirs {
    background: #FF0000 url("http://www.wonderbackgrounds.com/glitter/backgrounds/glitter_background_b7.gif") repeat 0% 0%;
}
/* mine */
.mTable .theirs {
    background-image: none;
    background-color: #FFC0C0;
}
</style>
</head>
<body>
<table class='mTable' border="1">
  <thead class="theirs">
    <tr class="theirs">
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot class="">
    <tr class="theirs">
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody class="theirs">
    <tr class="theirs">
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr class="theirs">
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
</body>

</html>
于 2012-09-10T00:44:26.243 回答