Question

我有一个代码，如果我在外部div上应用 text-decoration：line-through; ，所有内部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

使用var a = function b() { // here your function can be access with a or b // but 'b' garantee you that you call current function // and 'a' not - cause at code below you can redefine a-value to another one // also you can get function by 'b' outside function - it works only inside }。

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>不是继承属性，因此内部div具有隐式text-decoration，默认值。通过使用text-decoration:none，您可以告诉元素它应该与其父元素具有相同的文本修饰。

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>

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

2 个答案: