在单个元素上继承多个文本装饰

Question

我遇到了与每个主要浏览器相同的奇怪问题：使用两个text-decoration属性设置元素样式。

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

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

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

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