Question

如果我有父节点和子节点，并且我在父节点上设置text-decoration:underline，则这将适用于子节点的文本内容。但是，如果我将子div设置为position:absolute或position:fixed，则不再继承文本修饰。

我查看了规范，但我没有看到任何描述这个的内容。大多数地方，例如MDN，将<{1}}和text-decoration描述为不继承，这让我想知道为什么它会有效。也就是说，这种行为似乎在所有浏览器中都是一致的，所以我认为我错过了一些东西。

请参阅下面的代码段，您可以使用这些按钮更改子div的位置css：

text-decoration-line

var positions = ['static','relative','fixed', 'absolute']


for(idx in positions){
    $('#buttons').append($('<input/>').prop('type','button').prop('value',positions[idx]))
}

$('input').click(function(){
    $('#child').css('position',this.value);
})

#parent{
  text-decoration:underline;
}
#buttons{
  position:absolute;
  top:30px;
}

Answer 1

没错，文字装饰不继承。这种特殊行为与继承的CSS定义（它是cascade的一部分）略有不同。该规范专门使用＆＃34;宣传＆＃34;而是描述文本装饰的行为，相反，它与级联无关。特别是it says：

请注意，文本装饰不会传播到浮动和绝对定位的后代

就本声明而言，固定定位和绝对定位的盒子都被认为是绝对定位的。

文本修饰的传播和继承之间的主要区别在于，通过继承，后代实际上为自己接受父CSS的属性。文字装饰不是这种情况 - 在后代上绘制的装饰实际上是父母的装饰。你可以通过给父元素和子元素赋予不同的前景颜色来看到这一点：

＆＃13;

var positions = ['static','relative','fixed', 'absolute']


for(idx in positions){
    $('#buttons').append($('<input/>').prop('type','button').prop('value',positions[idx]))
}

$('input').click(function(){
    $('#child').css('position',this.value);
})

＆＃13;

#parent{
  text-decoration:underline;
  color:red;
}
#child{
  color:blue;
}
#buttons{
  position:absolute;
  top:30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">
    Sample
  </div>
</div>

<div id="buttons"></div>

＆＃13;

我对this similar question的回答探讨了inherit关键字如何影响 - 或者更确切地说，不会影响 - 无论文本装饰是否传播到某些后代。

为什么文本修饰会根据子元素的位置停止继承？

1 个答案: