在单个元素上继承多个文本装饰[重复]答案

【问题标题】：Inheriting multiple text-decorations on a single element [duplicate]在单个元素上继承多个文本装饰[重复]
【发布时间】：2013-06-19 14:24:57
【问题描述】：

我在每个主流浏览器上都遇到过同样奇怪的问题：一个元素被两个 text-decoration 属性设置样式。

第一个装饰来自父元素，第二个来自元素本身。这是relevant HTML：

<div style="text-decoration: underline">
    <span style="text-decoration: line-through">Hello</span>
</div>

如何覆盖第一个声明，而不是添加到它？

【问题讨论】：

标签： html css text-decorations

【解决方案1】：

您看到的是父元素上的文本装饰被应用到子元素中的文本，因为子元素中的文本也被视为父元素中文本的一部分。详情请见spec。

目前无法在保持文本流畅的同时取消子级上的父级文本装饰。您可以浮动或绝对定位子元素，或使其成为内联块，但这会改变布局。如果这不是可取的，您将不得不找到一种方法将父 text-decoration 样式移动到父元素中子元素的兄弟元素。如果父元素中有裸文本，则意味着您需要将其包装在兄弟元素中。例如，如果你有这个额外的文本：

<div style="text-decoration: underline">
    <span style="text-decoration: line-through">Hello</span>
    world
</div>

您需要包装它，并相应地移动声明：

<div>
    <span style="text-decoration: line-through">Hello</span>
    <span style="text-decoration: underline">world</span>
</div>

【讨论】：

就个人而言，我认为这与级联的定义相反，但是，必须解决。谢谢！
@katspaugh：是的，文字装饰是一种很奇怪的野兽......