Question

我正在创建一个插件，它有自己的css文件（从sass编译）

我只是想知道在覆盖样式时最好的方法是什么。

例如，我为我的插件设置了H1样式。我怎样才能使用户不以H1风格覆盖它？

我知道我可以要求他们最后添加我的样式表，但我的风格会覆盖他们的样式。

我该如何处理？

Answer 1

避免样式冲突的最佳方法是通过向元素添加特定于插件的类，从用户可能在自己的代码中实现的插件中锁定插件。

E.g。您可以通过添加名为h1

的类来设置myPlugin-h1的样式

<h1 class='myPlugin-h1'></h1>

然后您可以使用插件将这些样式添加到DOM中，或者要求用户选择添加它们的位置（首选）。

那说..通常的插件允许用户将一个类添加到顶级＆＃39;要表示应该应用插件的元素，然后插件样式表通过此类为元素添加前缀，或者动态地将类分配给子元素。

因此，在您的HTML中，您可能有：

<div class='myPlugin'><!--
   content either dynamically added by your plugin or already present
--></div>

然后您的插件CSS将包含.myPlugin h1

Answer 2

您可以为元素使用唯一的ID或类。

或最好的方式是

<div id="parentWrapper">
<!-- Your plugin's elements goes here -->
</div>

你的样式表将是

#parentWrapper h1 {  // h1 definition 
}

#parentWrapper p {
}

.
.
.

Answer 3

只需在你的h1标签中添加一个类就可以了。您无需向<h1>添加！important标记，这会阻止课程开始学习。

<强> HTML

<h1>Hi</h1>
<h1 class="blue">This</h1>

CSS

h1{
    color:red;
}
.blue{
   color:blue;
}