正则新手求教：如何匹配含任意正整数的piece square-[数值] bn表达式？

问题根源 #

• CSS原生属性选择器不支持正则语法，你写的.[0-9].[0-9]属于正则规则，放到class^=匹配中只会被当成普通字符串匹配，无法识别为数字通配逻辑。
• ^=是前缀完全匹配规则，无法同时满足你「前缀是piece square-、后缀是 bp」的两端匹配需求。
• 如果你匹配的元素类名顺序不固定，^=前缀匹配还会因为第一个类不是piece直接失效。

可行解决方法 #

最优原生CSS写法（全浏览器兼容，无需依赖Stylus扩展能力） #

用CSS原生的类包含匹配规则组合实现，逻辑准确无误伤：

/* ~= 匹配包含独立对应类名的元素，*= 匹配包含指定字符串的属性值 */
div[class~="piece"][class*="square-"][class~="bp"],
div [style*="bp.png"] {
    background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/club/150/bp.png")!important;
}

Stylus专属正则写法（更简洁，仅Stylus样式管理器生效） #

如果只在Stylus中使用，可以直接用它扩展支持的正则匹配语法：

div[class*=/^piece square-\d+ bp/],
div [style*="bp.png"] {
    background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/club/150/bp.png")!important;
}

内容的提问来源于stack exchange，提问作者Frankie 'Moodurian' Kam