无法解除嵌套元素的直线操作

Question

我想对标签内的<td>标签除了标签之外的<a>标签内容应用直通.我申请的风格似乎不起作用......任何想法？

这是一个可以玩的例子(我在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; }

Answer 1

这就是它应该如何工作 - 虽然a元素确实有text-decoration: none,但直线仍在设置中.

你可以在每添加一个跨度td作为一种解决办法,并设置text-decoration: line-through上span如果需要的话.

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>

Answer 3

您必须将文本包装在类似 a 的内容中span，然后应用text-decoration: line-through到该内容： http: //jsfiddle.net/9qbsq/1/

这样，您就不必完成在应用line-through父元素时删除子元素这一不可能的任务line-through。