<分区>
html - 在单个元素上继承多个文本装饰
我在使用每个主流浏览器时都遇到了同样的奇怪问题:一个元素的样式有两个 text-decoration 属性。
第一个装饰来自父元素，第二个来自元素本身。这是 relevant HTML :
<div style="text-decoration: underline">
<span style="text-decoration: line-through">Hello</span>
</div>
如何覆盖第一个声明，而不是添加到它？
最佳答案
您看到的是父元素上的文本装饰被应用于子元素中的文本，因为子元素中的文本也被视为父元素中文本的一部分。查看spec了解详情。
目前没有办法在保持文本流动的同时取消子项上的父文本装饰。您可以 float 或绝对定位子元素，或使其成为内联 block ，但这会改变布局。如果这不是您所希望的，您将不得不找到一种方法将父 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>
关于html - 在单个元素上继承多个文本装饰，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17193864/