html - 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 是否可以实现我的目标？

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

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

Answer 1

考虑与 CSS variables 结合的另一个实用程序类像下面。您只需编写一次 base 值，实用程序类也可以以相同的方式与其他属性一起使用。

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

.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>