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

问题描述

可以在类名称中传递CSS的参数？例如：

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

 < span class =mrg-t-10>测试< / span> 
  
 
 
 
在此示例中，X应为10。
解决方案
不是。我们最接近的是  attr（） function ，但只适用于 content 属性：
 
 
 
 
 
 
  figure :: before {content：attr（data-before）'，';} figure :: after {content：attr（data-after）'！';}  
 
 < figure data-before =Hellodata-after =world>< / figure& / code> 
 
 
 
 
 
 
也许有一天，这将被扩展， ，但现在这是不可能的。
 
 
 
目前，我确定你知道如果你想要能够使用 .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屋！