如何用CSS选择器匹配属性含多个指定字符串的元素？

根据你给出的data-key格式（无首尾下划线，层级用下划线分隔），可以通过CSS属性包含选择器的层级覆盖来实现不同下划线数量元素的差异化样式：

实现代码 #

精准匹配写法

/* 1个下划线的元素（如test_1）设为红色 */
div[data-key*="_"]:not([data-key*="_*_"]) {
    color: red;
}

/* 2个下划线的元素（如test_1_2）设为蓝色 */
div[data-key*="_*_"]:not([data-key*="_*_*_"]) {
    color: blue;
}

/* 3个下划线的元素（如test_1_2_3）设为绿色 */
div[data-key*="_*_*_"] {
    color: green;
}

简洁覆盖写法

利用CSS规则的先后覆盖顺序，代码更精简：

/* 所有带下划线的元素默认红色（匹配1个、2个、3个下划线的元素） */
div[data-key*="_"] {
    color: red;
}

/* 覆盖2个及以上下划线的元素为蓝色 */
div[data-key*="_*_"] {
    color: blue;
}

/* 覆盖3个及以上下划线的元素为绿色 */
div[data-key*="_*_*_"] {
    color: green;
}

原理说明 #

• [data-key*="_"]：匹配所有包含至少1个下划线的元素
• [data-key*="_*_"]：匹配包含至少2个下划线的元素（子串_*_代表「下划线+任意字符+下划线」，仅存在两个及以上下划线时才会出现这类子串）
• [data-key*="_*_*_"]：匹配包含至少3个下划线的元素，以此类推

这种写法无需依赖复杂正则，兼容性好，完全适配你给出的属性格式要求。

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