html - 为特定文件中的元素启用 CSS

Question

我正在为一个应用程序开发一个插件。所以让我们假设我们必须 css 文件，app.css 和 plugin.css

app.css的内容

.tempClass{
height : 50px;
width : 50px;
}

plugin.css 的内容

.pluginTempClass .tempClass{
height : 40px;
}

现在如果我的插件添加到应用程序的 DOM 中

<div class='pluginTempClass'>
     <div class='tempClass'>
         SOME CONTENT
    </div>
</div>

此处对于高度属性，.pluginTempClass .tempClass 选择器具有更大的特异性，因此应用了高度规则，但由于此类未定义宽度，.tempClass 的宽度规则应用了 app.css。是否有办法避免将 app.css 样式应用于添加到 DOM 的插件元素

Answer 1

您需要在 plugin.css 中设置一个新宽度，以覆盖 app.css 中使用的宽度值，例如

.pluginTempClass .tempClass {
    height: 40px;
    width: xxx;
}

其中 xxx 是您想要的宽度。要重置宽度，您可以将其设置为“自动”。