1

无法让背景颜色始终层叠：http: //jsfiddle.net/yHgTt/

<html>
  <head>
    <style>
      td { background-color: blue; } 
    </style>
  </head>
  <body>
    <div style="background-color: yellow">
      yellow
      <span>
        and yellow too
      </span>
    </div>
    <span style="background-color: yellow !important ">
      yellow
      <div>
        not yellow but expecting to be
      </div>
    </span>
    <table>
      <thead>
      </thead>
      <tbody>
        <tr style="background-color: yellow !important">
          <td>
            expecting to be yellow
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

编辑

用例是使用 chrome 扩展突出显示第三方网站的部分内容。虽然我可以操作 html，但我根本不想这样做，以便突出显示/注释尽可能简单且无错误。

4

3 回答 3

4

background-color不会被继承！

背景属性不会被继承，但由于 'background-color' 上的初始 'transparent' 值，父框的背景默认会发光。

http://www.w3.org/TR/CSS21/colors.html#background

但是，没有背景颜色的嵌套元素可能会显示其后面元素的背景颜色。

所以对于你的情况：

  • 第一个示例有效，因为内部跨度没有背景颜色，并且 div 的背景会发光。

  • 第二个例子不起作用，因为只有<span>(inline element) 部分获得背景颜色，但不包裹嵌套的<div>(block element)。

  • 第三个例子不起作用，因为它<td>有自己的背景颜色，因此没有任何东西可以透过

于 2013-03-19T18:40:04.833 回答
0

<span> 不能包含 <div>。浏览器很可能通过将 <div> 放在 <span> 之后为您“纠正”此问题，您的 CSS 规则将不适用。

如果您将 <span> 更改为 <div> 您的示例按预期工作。

于 2013-03-19T18:35:30.183 回答
0

你有几个问题。

  1. 您在<div>标签内有一个<span>标签，这是不正确的。

  2. 您的 CSS 是td { background-color: #8AE; }，但您将黄色背景颜色应用于<tr>标记，它是<td>.

我已将您的 CSS 更新为：

tr { background-color: #8AE; }

和你的 HTML 到这个：

<body>
    <div style="background-color: yellow">
        yellow <span>and yellow too</span>
    </div>
    <div style="background-color: yellow !important ">
        yellow <span>not yellow but expecting to be</span>
    </div>
    <table>
      <thead>
      </thead>
      <tbody>
        <tr style="background-color: yellow !important">
          <td> expecting to be yellow </td>
        </tr>
      </tbody>
    </table>
</body>

您可以在这里看到它按预期工作：http: //jsfiddle.net/yHgTt/2/

于 2013-03-19T18:43:00.773 回答