html - 如何防止我的 anchor 标签被直通？

Question

我有我的 span 标签:

<span style="text-decoration:line-through" > Hello World <a href="http://www.yahoo.com">Yahoo</a> </span>

如您所见，我在跨度上应用了直通。但这也会导致 anchor 标记上的直通。如何防止 anchor 标记上的直通线。我不想罢工我的 anchor 标签。

注意:请不要让我将 anchor 标签移到 span 标签之外!如果我能做到，我就不会问这个问题。

Answer 1

[来自CSS text-decoration property cannot be overridden by child element ]

text-decoration specs状态:

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

text-decoration-skip ，如链接问题中所述，最新版本的 Chrome 和 Firefox 均不支持

---

我不知道你是否可以接受，但由于下面的解决方案不起作用，这可能是你唯一的方法:

<span>
   <span class="strikethrough">Hello </span>
   <a href="#">World!</a>
</span>​

.strikethrough {
   text-decoration: line-through;
}

嵌套span元素是有效的。 Are nested span tags OK in XHTML?

---

不起作用:

该属性默认会被 child 继承。如果您不想要它，请覆盖它。

span > a {
   text-decoration: none;
   /* or perhaps 
   text-decoration: underline;
   */
}

这将确保作为 span 元素的直接后代出现的所有 anchor 元素不会有删除线。