RegEx for css class name

Question

我想要一个班级cX，其中x是0到100之间的数字。我可以将c0添加到c100到我的CSS。但是，我想避免这种情况。

我知道有一些方法可以匹配像h2[rel="external"]这样的元素属性。但是也可以匹配类名吗？是否也可以在规则中使用匹配的值？

实施例

.c[x] { height: x%; }

Answer 1

编辑 - CSS attr

经过一些研究后，我发现有一个名为attr的CSS函数正是您所寻找的，但是，它的支持目前仅限于CSS content属性，而不是然而，其他人，关注它是有趣的，我认为这将是未来的解决方案

来自Moz MDN：

  

attr（）CSS函数用于检索属性的值   所选元素的选择并在样式表中使用它。它可以使用   在伪元素上，在这种情况下，属性的值   返回伪元素的原始元素。

您的代码可能如下所示：

.c { height: attr(data-height %, 0); }

HTML

<div class="c" data-height="1"></div>
...

这将从元素的数据属性获取高度，并使用%百分比单位进行设置，如果找不到0则返回data-height。

目前支持的方法：

来自W3 Docs：

  

<强> 6.3.2。子串匹配属性选择器

     

提供了三个额外的属性选择器用于匹配   属性值中的子串：

     

[att^=val]

     

表示具有att属性值的元素   以前缀“val”开头。如果“val”是空字符串那么   选择器不代表任何东西。

     

[att$=val]

     

表示一个元素   使用att属性，其值以后缀“val”结尾。如果   “val”是空字符串，然后选择器不代表   任何东西。

     

[att*=val]

     

表示具有att属性的元素   其值至少包含子字符串“val”的一个实例。如果   “val”是空字符串，然后选择器不代表   任何东西。属性值必须为CSS 标识符或字符串。 [CSS21]   选择器中属性名称的区分大小写取决于   文件语言。

正如评论中所讨论的，目前没有纯CSS解决方案，您可以尝试以下方法之一：

SASS

@for $i from 1 through 100 {
    $height: percentage($i/100);
   .c#{$i} {height: $height;}
}

输出：

.c1 {height: 1%;}

.c2 {height: 2%;}

.c3 {height: 3%;}

...

LESS

.c-gen(@index) when (@index > 0){
  .c@{index}{
    height: @index * 1%;
  }
  .c-gen(@index - 1);
}
.c-gen(100);

LESS code

Harry

服务器端

您可以让服务器端脚本输出每个项目的内联CSS

PHP示例：

<?php 
for ($i = 1; $i <= 100; $i++) {
    echo "<span height='".$i."%'>".$i."</span>";
} 
?>

输出

<span height="1%">1</span>
...

的jQuery

var i = 0;
$('.c').each(function() {
  i++;
  $(this).attr('height', i + '%');
  //console.log(i); //debug
});