2

重複の可能性:
この CSS テキスト装飾のオーバーライドを機能させるにはどうすればよいですか?

Chrome と Firefox は、次のように、スパンによって無効になることもある、行を介したテキスト装飾を使用して td を作成しようとする私の試みを阻止しようと共謀しています。

<style type="text/css">
tr.st td {
  text-decoration: line-through;
}

tr.st td span.unstrike{
  text-decoration: none;
  background:yellow;
}

tr.st td span#unstrike-id{
  text-decoration: none;
  background:yellow;
}

tr.st td span.unstrike-important{
  text-decoration: none ! important;
  background:yellow;
}

</style>


<table  border>
    <tbody>
      <tr>
        <td>normal</td>
      </tr>
      <tr class="st">
        <td>struck out</td>
      </tr>

      <tr class="st">
        <td>struck out <span class="unstrike">unstrike class: shouldn't I be normal?</span></td>
      </tr>

      <tr class="st">
        <td>struck out <span id="unstrike-id">unstrike-id identifier.  Shouldn't I be normal?</span></td>
      </tr>

      <tr class="st">
        <td>struck out <span class="unstrike-important">unstrike-important: shouldn't I  be even more normal?</span></td>
      </tr>
    </tbody>
  </table>

スペックに目を細めているのですが、よくわかりません。

text-deocration の特殊なケース? 何を与える？

ここでデモ

4

3 に答える 3

0

プロパティを使用するライン装飾の特定のシーケンスがある場合は、使用できます:nth-child()

または、td ではなく、span に行装飾を追加してみてください。私の例を見てください：jsfiddle

于 2012-06-18T07:39:12.767 に答える
0

取り消し線は、内容ではなく表のセルに適用されます。に境界線を適用する場合も同様<td>です。スパンの境界線を削除しても、td の境界線が透けて見えなくなりません。

スパンに不透明な背景を追加できます。

追加:

position: relative;
display: inline-block;
top: 0px;

それを修正するようです。

于 2012-06-18T07:42:39.250 に答える
0

これは、特にいくつかの質問のだまされているようです。

この CSS テキスト装飾のオーバーライドを機能させるにはどうすればよいですか?

要するに、http://www.w3.org/TR/CSS21/text.html#propdef-text-decorationの (私には非常にあいまいな) 言語は、 「オーバーライドなし」と言っています。

モデレーター/編集者の皆様、私をだまし者として閉じてください。

于 2012-06-18T07:48:09.383 に答える