CSS:从文本中删除下划线

Question

我有以下HTML

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

即使我使用"无"作为"内部文本",它仍然有下划线.这是JS小提琴的例子:http://jsfiddle.net/oj2wj1d6/1/

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

Answer 1

这实际上是规范中定义的行为:

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

有关详细信息,请访问https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

Answer 2

有点 hacky，但使用::first-linepsueduo 选择器，它仅将样式应用于“第一行”，因此在下面的示例中，我使用元素 (a p) 来中断文本并触发操作。

当然，这是假设您想要加下划线的唯一文本是内容的第一行。买者自负、YMMV 等

JSFiddle.net 上的示例

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;
}

Mozilla 开发者网络上的文本装饰 ::Mozilla 开发者网络上的第一行