Question

我有一个使用名为smDateTimeRangePicker的库的角度项目，它包含以下代码：

.action {
  height: 30px;
  margin-bottom: 0;
  position: absolute;
  bottom: 0;
  width: 100%; }

但是，在我的项目中，有一个代码也包含action类

<div flex class="action cell">

它受上面的CSS影响，如何避免它？

此问题考虑了以下几点：

有一种方法可以避免项目和库之间的CSS影响。
图书馆使用不好的做法，必须避免影响项目。这是图书馆的一个错误，必须修复。
这种影响经常发生，因此我需要更改我的项目以避免冲突

Answer 1

将项目操作类重命名为其他内容是最干净的方法。否则你不得不诉诸被认为是不好的修复工具，比如！important，但是这些仍然可以完成工作。

Answer 2

这种情况经常发生在我身上，所以要解决它，我只需要在我的页面或特定部分添加一个父类

<div class="my-unique-class">

    ---
        <div class="action">
            ---
        </div>
    ---

</div> 

.my-unique-class .action {
  height: 30px;
  margin-bottom: 0;
  position: absolute;
  bottom: 0;
  width: 100%; 
}

Answer 3

您可以通过提高css规则的特异性来避免这种情况。有多种方法可以做到这一点：

在自定义文件之前包含所有第三方CSS文件，以便具有相同优先级的css规则（在您的情况下）可以覆盖第三方CSS文件中的规则。
上述解决方案应该适用于大多数情况，但有可能第三方CSS可能带有更高优先级的订单，因此您可以通过在父标记处添加类来增加css的权重：

.parent > .action {
  / * Some CSS Code */
}

<section class="parent">
  <div flex class="action cell"></div>
</section>

MDN有关于CSS特异性here

Answer 4

如果您无法更改您的班级名称，您可以通过以下方式使您的元素对您的元素独一无二：

.action.cell {

/*your styles here*/

}

通过省略action和cell之间的空格，你说两个类都在同一个元素上。另外，请确保在第三方样式表之后加载样式表，以便将样式应用于他们的样式表。

Answer 5

如果你有CSS规则，你可以在分号前使用！important：

background: black !important ;

它标志着你的规则是＆＃34;重要的＆＃34;并且无法使用任何CSS文件进行更改。

只有内联CSS才能覆盖它：

style="background: blue !important"

如何避免第三方库对CSS的影响？

5 个答案: