CSS中的删除线未被移除

Question

CSS中的删除线未被移除

7

我有一些代码，用于为删除行的TR添加删除线，但这意味着我的“操作”列（只包含按钮）会受到影响。这是因为按钮之间有单独的空格，这些空格最终也会被添加删除线。

在W3Schools上查看了一下后，我很困惑为什么下面的示例不能正常工作：

<html>
  <head>
  <style type="text/css">

    tr {text-decoration:line-through}
  </style>
  </head>

  <body>
    <table>
      <tr>
        <td>this needs to be line-throughed</td>
        <td style="text-decoration: none !important;">This shouldn't be line-throughed.</td>
      </tr>
    </table>
  </body>
</html>

我应该如何清除子元素上的删除线？编辑我更新了我的示例 - 问题是我不想将样式从父元素中去掉，只想去掉单个子元素的样式。

- JustLoren

CSS 不是这样工作的。h2 和 tr 是容器，所以你不能通过改变它们子元素的样式来改变它们的样式。参见 Zarembisty 或 Dmitri 的答案了解正常的做法。 - Justin Johnson

6个回答

1

之前有一个类似的问题，根据那个答案，你不能做你想要完成的事情。

编辑：鉴于你的示例，为什么不单独将删除线应用于TD元素呢？

<html>
  <head>
  <style type="text/css">

    td.deleted {text-decoration:line-through}
  </style>
  </head>

  <body>
    <table>
      <tr>
        <td class="deleted">this needs to be line-throughed</td>
        <td>This shouldn't be line-throughed.</td>
      </tr>
    </table>
  </body>
</html>

- Marek Karbarz

天啊，希望答案不是“哈哈，你没有桨就被困住了”。 - JustLoren

如有疑问，请选择早期的（Dmitri获胜）。 - Marek Karbarz

0

删除 H2 上的中划线。

<html>
  <head>
  <style type="text/css">

    h2 {text-decoration:line-through}
    h2.alt { text-decoration: none; }
    h2.alt span { border: 1px solid black; }
  </style>
  </head>

  <body>
    <h2>Line-through</h2>
    <h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2>
  </body>
</html>

（可在此处查看：http://jsbin.com/anopa/）

子元素(span)不能影响应用样式的父元素(h2)。您必须更改原始应用样式的位置。

编辑：更新示例

- Justin Johnson

但这样做会违背初衷，因为我需要删除的是子元素，而不是父元素。根据当前的设计，父元素“需要”它。 - JustLoren

0

修复此问题的一种方法是更改

tr {text-decoration:line-through}

至

tr td {text-decoration:line-through}

结果是，删除线在单个表格单元格上而不是整行上。这使您可以为单个单元格指定不同的样式。

顺便说一下，在IE5.5+上，您提供的示例代码似乎不存在此问题。但是，在FF3.5中，示例的行为与您解释的相同。我不确定哪种是实际的正确行为。

- Brian Hasden

0

试一下

<html>
  <head>
  <style type="text/css">

    tr td {text-decoration:line-through;}
    tr td.noline { text-decoration:none;}

  </style>
  </head>

  <body>
    <table>
      <tr>
        <td>this needs to be line-throughed</td>
        <td class="noline">This shouldn't be line-throughed.</td>
      </tr>
    </table>
  </body>
</html>

请注意，两者的样式都是“tr td”。

- Philip Schlump

-1

<td style="text-decoration: none>

它有效，除非你试图取消链接到URL。

那么这个短语也会使链接失效。

- user5481820

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dmitri Farkov · Accepted Answer

你不应该使用important或inline样式来实现这个。尝试

h2 {text-decoration:line-through;}
h2 span {text-decoration: none; border: 1px solid black;}

编辑

在这种情况下，由于您已经将text-decoration应用于它，因此必须从相同的元素tr中删除text-decoration，而不是td。否则，请执行以下操作：

tr td { text-decoration: whatever }

然后在需要的时候

<td style="text-decoration: none;"></td>