css – 继承文本 – 装饰样式

我如何否定或删除父母的文字装饰风格？例如,在下文中,文本和锚都具有直通的文本修饰,有没有办法将其应用于锚标记？

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

注意：将内部文本包装在一个范围内并不是一个简单的选择,所以我正在寻找基于css样式的解决方案,如果可能的话.

解决方法

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

Any text decoration setting on a
descendant Box can never “undo” the
text decorations of an ancestor Box.

永远不要说永远,对吗？

我还没有找到适用于IE的解决方案(除非您碰巧使用的是在< TD>上设置了删除线的情况),但是对于其他浏览器来说,它是可能的,尽管您将不得不对抗其副作用解决方案.

请在http://result.dabblet.com/gist/3713284/自己看看

简而言之：只需添加display：table;对孩子的风格.出于某种原因,在FF中你可以使用table,block,list-item或table-caption中的任何一个,但这些在Safari / Chrome中不起作用.

它使用以下代码：

<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>

css – 继承文本 – 装饰样式

解决方法

猜你在找的CSS相关文章