可以多次添加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是否可以实现我的目标？

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

.largeFont {
    font-size: 1.1em;
}

Answer 1

考虑另一个结合了CSS变量的实用程序类，如下所示。您只需编写一次基值，并且实用程序类也可以以相同的方式与其他属性一起使用。

如果您不想定义所有乘数，也可以依靠内联样式来更改变量

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

.x2 {
  --x: 2;
}

.x3 {
  --x: 3;
}

.x4 {
  --x: 4;
}

<p class="largeFont" style="--x:0.5">Hello</p>
<p class="largeFont">Hello</p>
<p class="largeFont x2">Hello</p>
<p class="largeFont" style="--x:2.4">Hello</p>
<p class="largeFont x3">Hello</p>
<p class="largeFont x4">Hello</p>
<p class="largeFont" style="--x:5">Hello</p>