类似正则表达式的 CSS 属性选择器通配符捕获

Question

假设我有以下 HTML：

<div class="tocolor-red">    tocolor </div>
<div class="tocolor-blue">   tocolor </div>
<div class="tocolor-green">  tocolor </div>
<div class="tocolor-yellow"> tocolor </div>

不必为每种颜色重复下面的 sn-p 之类的 CSS 代码...

.tocolor-red{
  background: red;
}
.tocolor-red::before {
  content: "red";
}

...有没有办法编写一个从 css 类中捕获颜色的 CSS 规则？为了尽职调查，我已经查找了属性选择器，并且我注意到已经有多种方法可以在 css 中使用通配符。但是，我还没有找到任何可以让我捕获通配符文本并将其作为规则一部分的内容。

如果正则表达式适用于 CSS，则规则如下所示：

.tocolor-([\w+]) {
   background: $1;
}
.tocolor-([\w+]:before {
   content: $1;
}

Answer 1

CSS 无法支持正则表达式捕获，虽然您可以选择类以字符串 tocolor- 开头的所有元素，但 CSS 无法捕获字符串的值以将其应用于规则。

顺便说一句，有点晚了，用 JavaScript 做到这一点的一种方法：

// retrieve all elements containing the string 'tocolor-':
var elements = document.querySelectorAll('[class*="tocolor-"]'),

// declaring two variables for use in later loops:
    classes, colorString;

// iterating over the (Array-like) collection of elements,
// using Function.prototype.call() to be able to apply the
// Array.prototype.forEach() method on the collection:
Array.prototype.forEach.call(elements, function (elem) {
    // 'elem' is the individual node of the collection
    // over which we're iterating.

    // creating an Array of the classes from the element:
    classes = Array.prototype.slice.call(elem.classList, 0);

    // creating a new Array, using Array.prototype.map():
    colorString = classes.map(function (c) {
        // 'c' is the specific class of the Array of classes
        // over which we're iterating.

        // if the current class ('c') begins with the string
        // 'tocolor-' then we return that class
        if (c.indexOf('tocolor-') === 0) {

            // after first replacing the 'tocolor-' string
            // with an empty string:
            return c.replace('tocolor-','');
        }
    });

    // setting the color of the element ('elem') to
    // the string found:
    elem.style.color = colorString;
});

var elements = document.querySelectorAll('[class*="tocolor-"]'),
  classes, colorString;
Array.prototype.forEach.call(elements, function(elem) {
  classes = Array.prototype.slice.call(elem.classList, 0);
  colorString = classes.map(function(c) {
    if (c.indexOf('tocolor-') === 0) {
      return c.replace('tocolor-', '');
    }
  });
  elem.style.color = colorString;
});

<div class="tocolor-red">tocolor</div>
<div class="tocolor-blue">tocolor</div>
<div class="tocolor-green">tocolor</div>
<div class="tocolor-yellow">tocolor</div>

Answer 2

这是你的通配符：

div[class^='.tocolor-'] {
    background: red;
}

但是如果你想使用变量，你应该看看 SASS：

http://sass-lang.com/