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

Question

我有以下 HTML 和 CSS sn-p，我想要“！”不必强调，但确实如此。我做错了什么？

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>

Answer 1

为什么 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; } 不会 造成任何改变；整个段落仍会加下划线。

但是，有时文本装饰不会传播到它们的后代元素 - 请参阅“text-decoration”属性上的W3C spec

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

所以这意味着如果 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>

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>

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>