类名的CSS属性值 | 类名的CSS属性值

本文介绍了类名的CSS属性值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

 < span class =mrg-t-10>测试< / span> 
  
 
 
 在此示例中，X应为10。
解决方案
不是。我们最接近的是，但只适用于 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属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！