CSS：令人惊讶地删除了没有处理子显示：内联块div

Question

如果我应用文本修饰 ，我有一个代码：line-through; 在外部div上，所有内部div元素也必须是“strikethroughed” 。 这通常100％正常; 但是，如果我将子元素设置为' display：inline-block '，现在应用于父div的删除线不会影响对孩子的攻击。 我必须把孩子作为显示器：内联块，我需要在添加文本装饰时划掉孩子：直通; 到父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> 

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

Answer 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 ，您可以告诉元素它应该具有与其父元素相同的文本修饰。

Answer 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>