Question

我有以下HTML

<div style="text-decoration: underline;">
    outer text
    <div style="text-decoration: none;">inner text</div>
</div>

即使我使用“none”作为“内部文本”，它仍然有下划线。这是JS小提琴示例：http://jsfiddle.net/oj2wj1d6/1/

如何从“内部文本”中删除下划线？我必须保持相同的HTML结构，而不添加任何新的HTML标记。

Answer 1

这实际上是the spec中定义的行为：

文本装饰跨越后代元素。这意味着无法在后代上禁用其祖先之一上指定的文本修饰。

的更多详情

Answer 2

有点hacky但使用::first-line psueduo选择器，它只将样式应用于“第一行”，因此在下面的示例中，我使用了一个元素（p）来破坏文本和触发行动。

当然，假设您想要加下划线的唯一文本是内容的第一行。告诫者，YMMV等

HTML：

<div class="first-line-underline">
  outer text a sentence
  wut
  yea
  <p>inner text</p>
</div>

的CSS：

.first-line-underline::first-line {
  text-decoration: underline;
}