html - 为什么文字装饰: none not work inside 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

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.

但是，有时文本装饰不会传播到它们的后代元素——参见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) float 或

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>