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

假设我有以下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>

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

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

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

这是您的通配符：

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

---

但是，如果您希望使用变量，则应查看SASS：

---

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-“]'），
类，彩色字符串；
Array.prototype.forEach.call（元素、函数（elem））{
classes=Array.prototype.slice.call（elem.classList，0）；
colorString=classes.map（函数（c）{
if（c.indexOf（'tocolor-'）==0）{
返回c.replace（'tocolor-'，''）；
}
});
elem.style.color=colorString；
});
tocolor
彩色
彩色
tocolor
看，您不能实际使用html属性的属性值作为css规则的值，但使用sass或更少的值，您可以生成循环中所需的每个规则。这是一个好主意，使用JS tho可以轻松完成。css实际上无法做到这一点。正如您已经建议的，您可能需要编译为css的语言（less、sass、scss），但随后您必须为每种颜色添加规则。@cimmanon A sass示例：）因此它会生成您需要的规则，但当然它不会从html中提取任何内容。只要使用有效的方法或正确的工具；）啊，但是如果我想
tocolor blue
显示蓝色，而不必编写第二条规则，那该怎么办呢？如果你想在选择器上使用变量，你应该看看SASS：不幸的是，我无法帮助使用SASS，因为我从未真正使用过它。
// 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;
});