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

您必须将文字换成span之类的内容，然后将text-decoration: line-through应用于：http://jsfiddle.net/9qbsq/1/

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

Answer 3

问题是text-decoration传播给后代：

在内联元素上指定或传播到内联元素时，它会影响所有内容   由该元素生成的框，并进一步传播到任何框   分割内联[...]
的流内块级框
对于建立内联格式化上下文的块容器，   装饰被传播到包装的匿名内联元素   块容器中所有流入的内联级子级。

对于所有其他元素，它会传播给任何流入的子元素。

但有两个例外：out-of-flow和atomic inline-level后代：

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

因此，您可以对儿童使用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 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; }

当你想要除了某些元素之外的所有攻击时，这通常更干净。您可以在必要时添加过滤器，而不是为每个打击添加跨度。

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

4 个答案: