CSS：去除文本下划线

Question

I have the following HTML

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

即使我在“inner text”中使用了“none”，它仍然带有下划线。这是JS fiddle示例：http://jsfiddle.net/oj2wj1d6/1/ 如何从“inner text”中删除下划线？我必须保持相同的HTML结构，而不添加任何新的HTML标签。

- curious1

---

哇，即使使用!important也不起作用。:( - BenjaminGolder

也许可以通过 JavaScript 找到一种方法... - NO-ONE_LEAVES_HERE

也许一个连贯的标记会避免这种情况 http://jsfiddle.net/oj2wj1d6/8/ 或者 http://jsfiddle.net/oj2wj1d6/9/ 不相关的答案只是猜测。 - G-Cyrillus

完全不知道为什么它不起作用...但是当你改变属性顺序，也就是第一个 div 包含 none，第二个包含 underline 时，它就可以工作了吗？ - Sajjad Khan

Answer 1

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

文本装饰跨越子元素绘制。这意味着，不可能在后代元素上禁用在其祖先元素之一上指定的文本装饰。

更多详细信息请参见https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration

- adilapapaya

---

感谢指出规范！但是如果后代文本必须从父标签继承文本装饰，而规范也允许同时使用“text-decoration: none;”，这就没有意义了。 - curious1

不，规格说明是有意义的。作为开发人员，您可以在任何地方添加声明，您可以进行世界上所有的声明，但最终是否能够工作？这取决于规格说明。仅仅因为您可以声明它，并不意味着它一定会起作用。 - Sgnl

Answer 2

有点巧妙，但使用伪选择器::first-line，它仅将样式应用于“第一行”，因此在下面的示例中，我使用了一个元素（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开发者网络上的首行

- Sgnl

---

Sgnl，根据其他人的输入，规格定义了该行为。您的解决方案虽然不完美，但在我的情况下有效。谢谢！ - curious1

是的，这是一个针对你情况的hack。未来的读者：请注意风险，结果因人而异等。 - Sgnl