CSS：惊人的删除线不适用于子显示：inline-block div答案

【问题标题】：CSS : Amazingly strikethrough not working on child display:inline-block divCSS：惊人的删除线不适用于子显示：inline-block div
【发布时间】：2023-03-28 18:38:01
【问题描述】：

我有一个代码，如果我在外部 div 上应用 text-decoration: line-through;，则所有内部 div 元素也必须是 'strikethroughed'。这正常工作100％；但是，如果我将子元素设置为 'display:inline-block'，那么现在应用于父 div 的删除线不会影响子元素的删除线。我必须将孩子作为 display:inline-block 并且我需要在将 text-decoration: line-through; 添加到 parent div 时划掉孩子。

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block;}

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

这是一个办公项目，非常感谢您的帮助！

【问题讨论】：

你错过了 " 周围 id 的引号。喜欢id="outer"
它不会影响兄弟。那不是问题。结果将是相同的......
@AmitSoni HTML5 中不需要。

标签： javascript jquery html css

【解决方案1】：

使用text-decoration:inherit。

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block; text-decoration:inherit}

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

通常，text-decoration 不是继承属性，所以内部 div 有一个隐含的text-decoration:none，默认值。通过使用inherit，您可以告诉元素它应该具有与其父元素相同的文本装饰。

【讨论】：

inherit 指示元素采用其父元素的 css 样式
我编辑了这个问题来解释它为什么起作用。然而，一个更好的问题是，如果它是block 或inline，它是如何通过内部 div 可见的。我不确定我能回答这个问题。
我很惊讶text-decoration 没有被继承；我认为所有样式都是默认继承的。尤其是因为这个“Text decorations draw across descendant elements.”
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。解释就在那里：W3C。这意味着除非适当指定，否则子元素不会继承该属性。
@AaronDigulla 许多风格是继承的，但绝不是全部。 Here 是一个列表。

【解决方案2】：

text-decoration 的默认值为none，因此如果您希望它不同，则需要指定一个值。使用inherit 使用父级的值：

#outer > div { text-decoration: inherit; }

或调整 #inner 的 css 以包含 text-decoration: inherit;：

#inner { background: pink; display: inline-block; text-decoration: inherit; }

示例

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block; text-decoration: inherit; }

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

【讨论】：

为什么inherit 在这里有所作为？这不应该是默认的吗？
text-decoration 自动具有值none，因此如果您希望它不同，则需要指定一个值