为什么text-decoration: none在p标签内无法生效？

Question

我有以下HTML和CSS片段，我希望"!"不要被下划线覆盖，但它还是被覆盖了。我做错了什么？

p {
  color:red; 
  text-decoration: 
    underline; 
  font-size: 1.2em;
}

span.none {
  text-decoration: none;
}

<p class="p">Click the thumb<span class="none">!</span></p>

- Stefan

Answer 1

tl;dr: 当文本修饰被传递给其后代元素时，它们无法被撤销，但在某些情况下，它们不会被传递给其后代。

这个例子在MDN上有详细说明：（重点是我的）

文本装饰跨越后代元素。这意味着不能禁用一个祖先元素指定的文本修饰符。例如，在标记中:

This text has some emphasized words in it.

样式规则 p { text-decoration: underline; } 会导致整个段落被下划线。样式规则 em { text-decoration: none; } 不会引起任何改变；整个段落仍然被下划线覆盖。

然而，有时文本装饰并不会传播到其子元素——请参阅“text-decoration”属性的W3C规范。

请注意，文本装饰不会传播到浮动和绝对定位的子元素，也不会传播到原子内联级子元素（如内联块和内联表格）的内容。

因此，这意味着如果 span 元素具有

1）display:inline-block；或

2）被浮动；或

3）被绝对定位，

则首先不会将文本装饰传播到它。（这也意味着 text-decoration:none; 不是必需的）

p {
  color:red; 
  text-decoration: 
    underline; 
  font-size: 1.2em;
}

span.none {
  display: inline-block;
}

<p class="p">Click the thumb<span class="none">!</span></p>

- Danield

Answer 2

将display:inline-block;添加到span.none class

p {
  color:red; 
  text-decoration: 
    underline; 
  font-size: 1.2em;
}

span.none {
  text-decoration: none;
  display:inline-block;
}

<p class="p">Click the thumb<span class="none">!</span></p>

- Abood

---

谢谢你的回答。现在它可以工作了。你能解释一下为什么需要这样做吗？也就是说，它确切地做了什么？ - Stefan

Answer 3

快速修复，虽然不太美观，但是能解决问题。希望其他人能提供更好的答案。

p {
   color:red; 
   text-decoration: underline; 
   font-size: 1.2em;
}
p { 
   display: inline 
}
p.none {
   text-decoration: none;
}

<p class="p">Click the thumb</p><p class="none">!</p>

- Fenici