html - 逐渐减小嵌套节点的字体大小

Question

对于缩进，margin-left 很好地与自身堆叠:

div div {
  margin-left: 10px;
  
}

<div>
  This is the main text. And below is something indented:
  <div>
    This is indented div with 10px margin
    <div>
      and this div get's another 10px, 20px total
    </div>
  </div>
</div>

但是我想以类似的方式减少字体大小:

像这样的伪代码？

div div {
  font-size: -=3pt;
}

这是真的吗？

Answer 1

你可以使用类似的东西

div { font-size: 85%; }

这将使字体每级减小 15%。

如果你真的想要比父节点少 3pt，你可以这样做:

div { font-size: calc(100% - 3pt); }

但我不推荐它，因为您很快就会接近 0pt。 Browser support for calc .