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 の背景が透けて見えるため、機能します。

  • 2 番目の例は、<span>(インライン要素) 部分のみが背景色を取得し、ネストされた<div>(ブロック要素) をラップしないため、機能しません。

  • 3 番目の例は機能しません。 に<td>は独自の背景色があり、何も透けて見えないからです。

于 2013-03-19T18:40:04.833 に答える
0

<span> に <div> を含めることはできません。ほとんどの場合、ブラウザーは、CSS ルールが適用されない <span> の後に <div> を配置することで、これを「修正」しています。

<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 に答える