为特定文件中的元素启用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>

这里对于height属性，.pluginTempClass .tempClass选择器具有更高的特异性，因此应用了高度规则，但由于此类没有定义宽度，app.css的.tempClass的宽度规则得到应用。无论如何避免将app.css样式应用于添加到DOM的插件元素

Answer 1

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

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

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

Answer 2

考虑＆GT;

<link rel="stylesheet" href="css/style1.css">
<link rel="stylesheet" href="css/style2.css">

如果style2为style1提供相同元素的样式，则style2的样式空间将覆盖style1。

Answer 3

我建议添加到由dom插入的div或其他标签，如

type="added"

在你的CSS中

，你要避免这个属性

.tempClass:not([type='added']){
...
}

进入此演示，尝试删除属性类型并将应用css

demo