如何在CSS样式中添加具有变量值的类名

Question

我有很多不同名称的表，比如：my-table-1590、my-table-1400、my-ttable-1121等等

我想添加CSS，一个可以一起更改所有这些表的自定义样式。

例如，我想要的不是所有这些单独的样式代码：

#my-table-1590 .my-table--desktop .my-table-product-0 {
background-color: red;
}
#my-table-1400 .my-table--desktop .my-table-product-0 {
background-color: red;
}
#my-table-1121 .my-table--desktop .my-table-product-0 {
background-color: red;
}

我只想添加一个代码来更改所有表(包括我将要创建的未来表(。

有可能做到这一点吗？

提前感谢您的帮助！！

Answer 1

您可以选择以#my-table-开始的所有ID，如下所示。

[id^="my-table-"] .my-table--desktop .my-table-product-0 {
background-color: red;
}

。。克拉符号。它在正则表达式中最常用来指定字符串的开头。

Answer 2

看起来所有的表内部都有相同的结构，要使红色变为红色的实际元素总是具有类.my-table-product-0。

那么你就不能只使用下面的代码吗？

.my-table-product-0 {
background-color: red;
}

---

如果由于某种原因无法做到这一点，请将另一个类(如.red-table(添加到所有表中，以便您可以像这样瞄准它们：

.red-table .my-table--desktop .my-table-product-0 {
background-color: red;
}

这正是类(应用于多个元素(而不是id(应用于单个元素(的用途。

---

或者，对于结构不总是相同的情况，可以使用CSS变量。像这样声明一个变量：

html {
--table-color: red;
}

然后在你所有的桌子上使用它：

#my-table-1590 .my-table--desktop .my-table-product-0 {
background-color: var(--table-color);
}
#my-table-1400 .my-table--desktop .my-table-product-0 {
background-color: var(--table-color);
}
#my-table-1121 .my-table--desktop .my-table-product-0 {
background-color: var(--table-color);
}
...

Answer 3

您可以尝试使用CSS变量：

声明：

--main-color: black;

用法：

color: var(--main-color);

点击此处了解更多信息。