css - 继承的文本装饰风格

Question

我将如何否定或删除父母的文字装饰风格？例如，在下面，文本和锚点都有一个直通的文本装饰，有没有办法不将其应用于锚点标签？

<span style="text-decoration:line-through;">
    Dead Text 
    <a href="#" style="text-decoration:underline;color:Red;">Not Dead Text</a>
</span>

注意：将内部文本包装在跨度中并不是我所拥有的简单选择，因此如果可能的话，我正在寻找基于 css 样式的解决方案。

Answer 1

我不相信这是可能的。从站点点：

此外，内联框上的文本装饰会沿整个框呈现，即使它包含后代框。这也可能看起来类似于继承。后代框上的任何文本装饰设置都不能“撤消”祖先框的文本装饰。

Answer 2

接受的答案中的以下行不正确：

后代框上的任何文本装饰设置都不能“撤消”祖先框的文本装饰。

永远不要说永远，对吧？

我还没有找到适用于 IE 的解决方案（除非您碰巧正在处理在 a 上设置删除线的场景<TD>）但是对于其他浏览器也是可能的，尽管您必须与解决方案的副作用作斗争。

请访问http://result.dabblet.com/gist/3713284/亲自查看

简而言之：只是添加display:table;到孩子的风格。出于某种原因，在 FF 中，您可以使用、或中的任何一个table，但这些在 Safari/Chrome 中不起作用。blocklist-itemtable-caption

它使用下面的代码：

<span style="text-decoration:line-through;">
   Dead Text
   <a href="#" style="text-decoration:underline;color:Red;">Undesired strikethrough</a>
</span>

<div style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a div</a>
</div>

<span style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display:  table;">display: table in a span</a>
</span>

<span style="text-decoration:line-through; display: block;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a span with "display:block;"</a>
</span>

<span style="text-decoration:line-through; display: table-cell;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a span with "display:table-cell;"</a>
</span>

<span style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: list-item;">display: list-item</a>
</span>

<span style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table-caption;">display: table-caption;</a>
</span>

Answer 3

我刚刚发现，如果您为块设置 position: absolute，它将在 chrome 和 FF 中都有效：

<span style="text-decoration:line-through;">
Dead Text 
<a href="#" style="text-decoration:underline;color:Red;">This not works</a>
</span>
<br/>
<span style="text-decoration:line-through;">
Dead Text 
<a href="#" style="position: absolute;margin-left: 5px;text-decoration:underline;color:Red;">This works</a>
</span>

丑陋，但在某些情况下可以提供帮助；

Answer 4

这也有效：display: inline-block

<span style="text-decoration:line-through;">
Dead Text 
<a href="#" style="text-decoration:underline;color:Red;">This not works</a>
</span>
<br/>
<span style="text-decoration:line-through;">
Dead Text 
<a href="#" style="text-decoration:underline;color:blue;display:inline-block">This works</a>
</span>