Question

我有一些代码在已删除的行的TR上放置了一个代码，但这意味着我的“Actions”列（只有）按钮会受到影响。这是因为按钮之间有单独的空间，这也是最终的线路。

在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>

我应该如何清除子元素的直通线？

修改我已经更新了我的例子 - 问题是我不想把这个样式从父元素中删除，只是一个子元素。

Answer 1

有一段时间有类似的question，根据答案你不能做你想要完成的事情。

编辑：鉴于您的示例，为什么不直接将线路直通应用于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>

Answer 2

您不必为此使用重要或内联样式。尝试

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

修改

在那种情况下使用tr，因为你应用了文本修饰，你必须将文本修饰从同一元素tr而不是td。否则：

tr td { text-decoration: whatever }

然后在需要时

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

Answer 3

直通线应用于H2，因此您必须将其从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）的样式，这是应用样式的位置。您必须更改最初应用样式的位置。

修改更新的示例

Answer 4

解决此问题的一种方法是更改

tr {text-decoration:line-through}

到

tr td {text-decoration:line-through}

因此，直通在单个表格单元格而不是整行。这允许您在单个单元格上指定不同的样式。

顺便说一下，你在IE5.5 +上给出的示例代码似乎不存在这个问题。但是，在FF3.5中，该示例的行为与您所解释的相同。我不确定哪个是实际的正确行为。

Answer 5

试试这个

<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”。

Answer 6

<td style="text-decoration: none>

它有效，除非您尝试删除的是指向URL的链接。

然后这句话也打败了这个链接。

CSS Line-Through未被删除

6 个答案: