可以多次添加CSS样式以提高效果

Question

我希望能够通过HTML尽可能地控制我的网页。

因此，我很希望能够做到这一点

<p class="largeFont">Hello</p>
<p class="largeFont largeFont">Hello</p>
<p class="largeFont largeFont largeFont">Hello</p>

如您所见，我只是增加了同一类的用法数量。这不起作用。

我希望那样，因为.largeFont是

.largeFont {
    font-size: 1.1em;
}

这个概念是我每次调用该类时，都会应用1.1em的字体大小。似乎正在发生的事情是，它仅将字体大小应用于原始值，并且不会随即重新计算。

然后我试图强迫它继承，但这也不起作用

.largeFont {
    font-size:inherit;
    font-size: 1.1em;
}

仅通过CSS和HTML可以实现我的目标吗？

Answer 1

考虑另一个结合了CSS变量的实用程序类，如下所示：

.largeFont {
  font-size: calc(1.1em * var(--x, 1));
}

.x2 {
  --x: 2;
}

.x3 {
  --x: 3;
}

.x4 {
  --x: 4;
}

<p class="largeFont">Hello</p>
<p class="largeFont x2">Hello</p>
<p class="largeFont x3">Hello</p>
<p class="largeFont x4">Hello</p>