Question

我知道在CSS中，您设置的样式会覆盖以前加载的样式表中该样式的设置。

但是有没有办法删除在先前加载的样式表中设置的样式？例如，假设我在我的项目中包含bootstrap，它具有以下样式：

.tab-content {
    overflow: auto;
}

这种风格造成了一些不良影响，所以我想摆脱它。我当然可以在我自己的样式表中将它设置为一些理想的值，但我宁愿它就好像那种风格从未出现过那样。

Answer 1

无法删除先前样式表中设置的CSS规则或属性（或实际上在同一样式表中），但您可以使用自己的样式覆盖这些规则或属性。

这些必须出现在原始规则之后（如果选择者具有相同的特异性 - 请参阅CSS Specificity: Things You Should Know）或具有比前一规则更高的特异性。

例如 -

.tab-content {
    overflow: auto;
}
...

.tab-content {
    overflow: inherit;
}

会工作，但是 -

#foo.tab-content {
    overflow: auto;
}
...

.tab-content {
    overflow: inherit;
}

不会被覆盖并且原始的自动值会有效。如果您想了解特异性，那么Keegan Street的Specificity Calculator在阅读上述文章后非常值得尝试。

如果您可以删除原始规则并且在其他地方不需要它，那么最好摆脱它而不是简单地处理新的替换值，但假设它在网站的其他地方使用或者是第三方内容的一部分（与引导程序一样）您不能或不想更改，然后您可以将其重置为默认值或所需值。在“溢出”的情况下，默认值是“可见的”（参见https://developer.mozilla.org/en-US/docs/CSS/overflow）。如果只在您的内容中需要该规则，那么您可能希望将其包含在选择器中以避免影响页面/网站的其他部分 -

#your-container .tab-content {
   overflow: visible;
}

Answer 2

我不太了解CSS，但在我写这个问题时，解决方案发生在我身上。只需在我后续的CSS文件中将样式设置为inherit，我就可以模拟默认行为，以便从未设置样式。

.tab-content {
    overflow: inherit;
}

是否可以删除后续文件中的CSS样式？

2 个答案: