为什么文本修饰:没有在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

为什么文本修饰:没有在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规范

请注意,文本修饰不会传播到浮动和绝对定位的后代,也不会传播到原子内联级后代(如内联块和内联表)的内容.

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

1)display: inline-block,或

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>

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>