为什么 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>

Answer 1

将 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 2

快速修复，但丑陋，但要做到这一点。希望其他人提出更好的答案。

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>

Answer 3

Why does the text-decoration: none not work inside p?

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

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

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

For example, in the markup:

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

the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined. The style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined.

但是，有时文本修饰 不会传播 到它们的后代元素 - 请参阅 [=54 上的 W3C spec =] 属性

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

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

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

Why does the text-decoration: none not work inside p?

html

css

text-decorations