如何用CSS瞄准类似的类及其子类?

Question

我在Wordpress中使用AE模板来创建网站周围使用的模板，因此我不必在每次需要更新一些信息时更改单个模板的每一次出现。在我的例子中，我有几十个这样的模板，除了一些文本和图像完全相同，所以他们都有完全相同的CSS，除了一些唯一的标识符在类。

下面是一个例子:

.elementor-3464 .elementor-element.elementor-element-380443b9 > .elementor-element-populated{
some-rules;
}

这一行CSS在所有模板中都是一样的，除了3464和380443b9会随着模板的不同而改变。

这似乎是浪费代码，我加载所有的CSS文件与相同的CSS多个模板的每个网页。是否有一种方法，我可以通过重写上述行为任意ID号/序列(3464和380443b9)来针对所有模板?

我希望我可以使用[class*=…]选择器，但它不起作用。我试着用这个来代替上面的例子:

[class^="elementor-"] [class*="elementor-element-"] > .elementor-element-populated{
some-rules;
}

Answer 1

[class^="elementor-"]仅在类列表以"element -"开头时才有效。如果在它之前有另一个类，例如class="elementor elementor-1234"，那么它将不起作用。

你可能需要使用:

[class*="elementor-"] [class*="elementor-element-"] > .elementor-element-populated{
some-rules;
}