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-decorationis 的默认值none,因此如果您希望它不同,则需要指定一个值.使用inherit使用母公司的价值:

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

或适应css #inner包括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>