来自类名的 CSS 属性值 [英] CSS property value from class name

问题描述

可以在类名中为 CSS 传递参数吗?例如:

.mrg-t-X {边距顶部:Xpx；}

<span class="mrg-t-10">测试</span>

在这个例子中，X 应该是 10.

解决方案

不，不是.我们最接近这个的是 attr() 函数，但这仅适用于 content 属性:

figure::before {内容: attr(data-before) ', ';}图::{之后内容: attr(data-after) '!';}

<figure data-before="Hello" data-after="world"></figure>

也许有一天它会被扩展，以便我们可以在其他地方使用它，但目前这是不可能的.

目前我确信您知道如果您希望能够使用 .mrg-tX 类，您需要为每个 X 定义单独的样式规则 你希望允许:

.mrg-t-1 { ... }.mrg-t-2 { ... }.mrg-t-3 { ... }...

It is possible to pass parameters for CSS in class name? For example:

.mrg-t-X {
   margin-top: Xpx;
}

<span class="mrg-t-10">Test</span>

In this example X should be 10.

解决方案

No it isn't. The closest we have to this is the attr() function, but that only works within the content property:

figure::before {
  content: attr(data-before) ', ';
}

figure::after {
  content: attr(data-after) '!';
}

<figure data-before="Hello" data-after="world"></figure>

Perhaps one day this will be expanded so that we can use it elsewhere, but for now this isn't possible.

Currently as I'm sure you're aware if you want to be able to use the .mrg-t-X class, you'll need to define separate style rules for each X you wish to allow:

.mrg-t-1 { ... }
.mrg-t-2 { ... }
.mrg-t-3 { ... }
...

这篇关于来自类名的 CSS 属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！