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;
}

有什么建议吗？

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;
}

Answer 2

我不确定，为什么有人没有指出。这实际上是可能的。

这是小提琴的链接

JSFiddle

在你不想要显示直通线的元素上添加display: inline-block就可以了。

尝试：

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

Answer 3

根据您的浏览器要求（在旧IE中不起作用），您可以使用：

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

Answer 4

使用跨度，不可能？

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>

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

如何清除表格行中元素的直通？

4 个答案: