继承文本 - 装饰风格

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

我刚刚发现，如果你为 block 设置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 2

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

\n\n

\n

另外，内联框上的文本装饰会沿着整个框呈现，即使它包含后代框。这也可能与继承类似。后代框上的任何文本装饰设置都不能\n \n \xe2\x80\x9cundo\xe2\x80\x9d 祖先框的文本装饰。

\n

\n

Answer 3

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

后代框上的任何文本修饰设置都无法“撤消”祖先框的文本修饰。

永远不要说永远，对吧？

我还没有找到适用于 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>