问题描述
我正在构建一个插件,许多在线商店都在使用它。当用户使用我的插件时,他可以在他的商店中生成一个模板 (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 个类),并且也会被应用。