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

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>

但是我想以类似的方式堆叠字体大小：

像这样的pseuodocode？

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

这样的事情是真的吗？

Answer 1

您可以使用类似

的内容

div { font-size: 85%; }

这会使每个级别的字体减少15％。

如果您确实希望比父节点小3pt，则可以执行以下操作：

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

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