如何使用通配符选择器简化给定的CSS样式？

你可以通过属性选择器来简化这段重复的CSS代码，无需逐个列出所有颜色类：

基础简化方案 #

.swatch-label.is-invalid[class*="swatch-"]:before {
    border-color: #dc3545;
}

说明 #

• [class*="swatch-"] 是CSS属性包含选择器，会匹配所有class属性里包含swatch-字符串的元素，刚好覆盖你所有的颜色类（如swatch-black、swatch-blue等）。
• 结合前面的.swatch-label.is-invalid，确保只有同时满足三个条件的元素伪元素before才会生效：拥有swatch-label类、拥有is-invalid类、拥有带swatch-前缀的颜色类。

更精准的方案（避免误匹配） #

如果担心页面中存在其他带swatch-前缀的非颜色类，可以用下面的选择器，精准匹配以swatch-开头的完整class（兼容class属性的不同排列顺序）：

.swatch-label.is-invalid[class^="swatch-"]:before,
.swatch-label.is-invalid[class*=" swatch-"]:before {
    border-color: #dc3545;
}

说明 #

• [class^="swatch-"]：匹配class属性以swatch-开头的元素（当颜色类是第一个class时生效）。
• [class*=" swatch-"]：匹配class属性中包含**空格+swatch-**的元素（当颜色类不是第一个class时生效）。

内容的提问来源于stack exchange，提问作者PixelPaul