为自定义格式匹配 CSS 模式

【问题标题】：Matching CSS patterns for customised formatting为自定义格式匹配 CSS 模式
【发布时间】：2018-03-14 05:27:24
【问题描述】：

我正在使用名为 Stylebot 的 Chrome 浏览器扩展程序将自定义 CSS 格式应用于网页上的特定元素 - 这样做的目的是在创建截屏视频之前选择性地隐藏敏感信息。

问题是在不同的页面上，相同的元素有一个稍微不同的标识符（只是末尾不同的数字），而不是必须手动自定义每个页面，我希望能够将 CSS 应用于任何东西修补特定模式。

我手动完成的一些示例：

#ext-gen115 em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

#ext-gen26 em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

#ext-gen498 em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

#ext-gen52 em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

如您所见，它们都具有相同的形式，但末尾有不同的数字（可以有不同的位数）。

我可以将这些与模式匹配吗？

谢谢

【问题讨论】：

标签： css stylebot

【解决方案1】：

不确定你是否还需要这个，但对于任何人来说，尝试使用属性选择器：

[id^="ext-gen"] em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

在等号之前使用插入符号将确保此选择器将匹配任何以“ext-gen”开头的 id。在你的情况下，你也可以这样做：

[id*="ext-gen"] em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

星号会导致这个选择器匹配任何包含字符串“ext-gen”的id。不过最好具体一点，所以在你的情况下，我会坚持使用插入符号。

最后提醒一下，您可以列出选择器（用逗号分隔）以清理代码：

[id^="ext-gen"] em,
.another-class em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

大括号中的规则将适用于任何匹配的选择器。

【讨论】：