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

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

.pluginTempClass .tempClass{
height : 40px;
}

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属性，.pluginempClass.tempClass选择器具有更大的特殊性，因此将应用该属性的高度规则，但由于该类未定义宽度，应用app.css的.tempClass的宽度规则。是否要避免app.css样式应用于添加到DOM的插件元素

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

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

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

请考虑>

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

---

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

我建议在div或dom插入的其他标记中添加一个属性，如

type="added"

在css中，可以避免此属性

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

在这个演示中，尝试删除属性类型并应用css

---

添加到DOM中的插件元素是什么意思？你想用一些标签来避免吗？这意味着我的插件会在应用程序中添加像div这样的元素。在某种程度上，它会插入div标签。我只想避免app.css中的样式影响插件的元素addsPatsy Issa：这肯定会起作用，但只适用于这种特定情况。我可能还有其他属性。我无法手动将所有属性设置为自动。感谢您回答这个问题，但这只是针对这个特定的情况。我想概括一些东西来避免这个问题。我可能有几十个类和属性。手动这样做不是一个好选择，我想是的……但是如果style2没有指定样式，style1的样式将获得效果，假设是元素狗。如果在Style1.css中指定狗的颜色为黑色，在Style2.css中指定为白色，则狗将获得白色。但如果在Style1.css中指定狗的背景色为白色，而在Style2.css中没有指定颜色，那么狗将获得白色背景色