为什么 text-decoration: none 在 p 中不起作用？

我有以下 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>

为什么 text-decoration: none 在 p 中不起作用？

tldr;当文本装饰传播到其后代元素时，它们无法撤消，但是在某些情况下，它们不被传播给他们的后代。

这个确切的例子记录在MDN：（强调我的）

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

例如，在标记中：

<p>This text has <em>some emphasized words</em> in it.</p>,

风格规则p { text-decoration: underline; }会导致整个段落 下划线。风格规则em { text-decoration: none; }不会 造成任何改变；整个段落仍带有下划线。

However，有时是文字装饰不传播到他们的后代元素 - 请参阅W3C spec关于 'text-decoration' 属性

请注意，文本装饰不会传播到浮动和 绝对定位的后代，也不是原子的内容 内联级后代，例如内联块和内联表。

所以这意味着如果 span 元素有

1) display: inline-block, or

2) 浮动或

3) 则绝对定位

文本装饰一开始就不会传播到它。 （这也意味着文本-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>