Question

我有以下HTML和CSS片段，我想要＆＃34;！＆＃34;不要强调，但确实如此。我做错了什么？

＆＃13;

p {
  color:red; 
  text-decoration: 
    underline; 
  font-size: 1.2em;
}

span.none {
  text-decoration: none;
}

＆＃13;

<p class="p">Click the thumb<span class="none">!</span></p>

＆＃13;

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; }不会   导致任何变化;整个段落仍然有下划线。

然而，有时文字装饰不会传播到其后代元素 - 请参阅W3C spec on＆＃39; text-decoration＆＃39 ;属性

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

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

1）display: inline-block或

2）浮动或

3）绝对定位

文本装饰首先不会传播给它。（这也意味着文字 - decoration: none;不是必需的）

＆＃13;

p {
  color:red; 
  text-decoration: 
    underline; 
  font-size: 1.2em;
}

span.none {
  display: inline-block;
}

＆＃13;

<p class="p">Click the thumb<span class="none">!</span></p>

＆＃13;

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>

为什么文本修饰：没有在p内部不起作用？

3 个答案: