无法取消嵌套元素的删除线

Question

我想对标记中的内容应用删除线，但要排除标记。然而，我所应用的样式似乎不起作用，你有什么建议吗？

以下是可供测试的示例（我在IE8中进行测试）： http://jsfiddle.net/9qbsq/ 以下是标记的实际内容：

HTML

<table border=1>
  <tr class="highlight">
      <td>hello</td>
      <td><a href="#">world</a></td>
  </tr>
  <tr>
      <td>foo</td>
      <td>bar</td>
  </tr>
</table>

CSS

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

- Coderama

---

你需要更清楚地表达哪些方面“似乎不起作用”。 - user456814

Answer 1

这应该是正常的工作方式-虽然a元素确实有text-decoration:none，但仍然设置了删除线。

您可以在每个td中添加一个作为解决方法，并在需要时将text-decoration:line-through设置在该上。

- alex

---

为什么会这样呢？因为规范是这样规定的。参见这个答案。 - BoltClock

Answer 2

问题在于text-decoration会传递给子元素:

当应用于或者从内联元素传递时，它会影响该元素生成的所有盒子，并且会进一步传播到任何拆分内联元素的内联块级盒子中[...]

对于建立内联格式化上下文的块级容器，修饰会传播到一个匿名内联元素，该元素包装块级容器的所有内联级流动子元素。

对于其他所有元素，修饰符会传播到任何流动子元素。

但是有两个例外：脱离文本流的和原子内联级后代:

请注意，文本修饰符不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代（例如内联块和内联表格）的内容中。

因此，您可以在子元素上使用display: inline-block来防止父元素的text-decoration影响它。

.highlight > td {
  text-decoration: line-through;
}
.highlight > td > a {
  display: inline-block; /* Remove parent's text-decoration */
  text-decoration: none; /* Remove default link underline */
}

<table border=1>
  <tr class="highlight">
    <td>hello</td>
    <td><a href="#">world</a></td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>

- Oriol

---

“text-decoration: none” 不是必需的，因为 “display: inline-block” 已经将其移除。 - Alexander Malakhov

@AlexanderMalakhov display: inline-block 可以去除从祖先元素继承的下划线，但无法避免 UA 样式表中自身下划线的出现。 - Oriol

这对我很有用，但我无法在 button 元素上使用它。当我定位按钮内部的 p 元素时，它确实起作用了。有人知道为什么吗？ - Frozenfrank

Answer 3

您需要将文本包装在类似于的东西中，并对其应用text-decoration: line-through，例如：http://jsfiddle.net/9qbsq/1/。这样，您就不必完成一个不可能的任务，即在父元素应用line-through时去除子元素上的line-through。

- thirtydot

---

好的回答。Sitepoint的text-decoration 参考页面 描述了这个行为：“子元素的任何文本修饰设置都不能‘撤销’祖先元素的文本修饰。” - JT.

更好的答案在这里：https://dev59.com/JnjZa4cB1Zd3GeqPcEcT#19529256。将项目的显示更改为“inline-block”，以清除其“text-decoration”。 - mikegertrudes

在大多数情况下更好，确实如此。它的缺点是必须将元素设置为inline-block，这可能不利于需要换行的文本，这里是一个人为制造的例子: http://jsfiddle.net/thirtydot/9qbsq/19/ - thirtydot

Answer 4

这个问题可以很容易地通过使用:not属性来解决。

HTML

<table border=1>
  <tr class="highlight">
      <td>hello</td>
      <td class='nostrike'><a href="#">world</a></td>
  </tr>
  <tr>
      <td>foo</td>
      <td>bar</td>
  </tr>
</table>

CSS

.highlight td:not(.nostrike) { text-decoration:line-through; }

当您希望除了某些元素外，其他所有内容都有删除线时，使用过滤器比为每个元素添加带删除线的 span 更清晰。

- richsoni