Question

我正在使用名为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;
}

如你所见，它们都有相同的形式，但最后有不同的数字（可以有不同的数字）。

我可以将它们与模式相匹配吗？

由于

Answer 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;
}

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

匹配自定义格式的CSS模式

1 个答案: