如何根据可用性应用 CSS 类？

如何解决如何根据可用性应用 CSS 类？

我正在构建一个插件，许多在线商店都在使用它。当用户使用我的插件时，他可以在他的商店中生成一个模板 (sample like this)。每家商店都将使用自己的主题。

现在问题来了。一些主题使用 .page-width 类来确定容器宽度。有些正在使用 .wrapper 类，而 .page-width 在 css 文件中不可用。我相信 .page-width 一般比 .wrapper 使用更广泛。

如何为我的容器设置类？如果我只使用 <div class='page-width wrapper'> 并且主题有 2 个类，包装类会破坏布局吗？或者我应该使用我自己定义的 .page-width 类来覆盖原来的？

因为有一百多个主题。我不知道如何最好地适应不同的主题。

解决方法

您可以使用的一种可能性是也为“碰撞”元素设置样式

.page-width,.page-width.wrapper {
    width: 500px;
}

对于类 page-width 的元素，它会被应用（当然）。

对于具有这两个类的元素，选择器比只有 .wrapper 的选择器具有更高的优先级（2 个类），并且也会被应用。