如何清除表格行中元素的删除线？

Question

我在使用表格行上的删除线时遇到了困难。我不希望链接受到删除线效果的影响。我正在使用Javascript动态更改tr类，因此希望保持尽可能简单。

我的当前代码：

HTML：

<table>
<tr class="table-item">
<td>Text</td>
<td><a href="#">Delete item</a></td>
</tr>
</table>

CSS：

.table-item td {
text-decoration: line-through;
}
.table-item a {
text-decoration: none;
}

有什么建议吗？

- frapser

---

MDC（Mozilla 开发者网络）指出：“文本装饰跨越子元素绘制。这意味着，在祖先元素上指定的文本装饰不能被禁用其后代元素上的文本装饰。” - Marcel Korpel

那确实是很好的信息，谢谢。 - frapser

Answer 1

我在 jsFiddle 上测试了一下，似乎唯一的方法是将你想要添加 line-through 的其他内容包装在另一个元素中，比如一个 span。

更新：根据请求提供来自 jsFiddle 的代码：

<table>
  <tr class="table-item">
    <td><span>Text</span></td>
    <td><a href="#">Delete item</a></td>
  </tr>
</table>

CSS（层叠样式表）：

.table-item td span {
  text-decoration: line-through;
}

- Austin Taylor

Answer 2

我不确定为什么没有人指出，这是完全可能的。

这是 JSFiddle 的链接： JSFiddle 在你不想显示删除线的元素上添加 display: inline-block 将起到作用。

尝试一下：

.table-item td {
  text-decoration: line-through;
}
.table-item a {
  text-decoration: none;
  display: inline-block;
}

- Gags

Answer 3

根据您的浏览器要求（旧版IE不支持），您可以使用以下内容：

.table-item td:first-child {
  text-decoration: line-through;
}

- jeroen

Answer 4

使用span，不行吗？

a {
    text-decoration: none;  
}
td span{
text-decoration: line-through;
}

<table>
<tr class="table-item">
<td><span>Text</span></td>
<td><a href="#">Delete item</a></td>
</tr>
</table>

或者你是严格使用代码注入来设置删除线样式的吗？

- Tim Joyce