jquery - 如何使元素忽略特定样式表

Question

是否可以让元素忽略特定的样式表？

例如:

<div class="hola"></div>

样式.css:

.hola {
    padding: 10px;
    width: 80%;
}

bootstrap.css:

div {
    padding: 0;
    margin: 0;
}

我希望我的 div .hola 只听 styles.css。

我认为这可能与 jQuery 或类似的东西有关。

Answer 1

忽略已为特定类或标签定义的某些 css 的最佳方法是针对更具体的情况覆盖它。 CSS 将为特定的样式属性(例如填充或边距)选择最具体的值，例如:

.big-font {
    font-size:16px;
    color: black;
}
.big-font .bit-smallerthough {
    font-size:15px;
}

类为“big-font”的 div 中的所有文本都将其字体大小设置为 16px，除了类为“bit-smallerthough”的 div 中的文本位于类为“big-font”的类中。在“大字体”div 之外的任何其他类为“bit-smallerthough”的 div 都不会受到 css 的影响。

覆盖其他 html 的另一种方法是使用“!important”关键字，它告诉浏览器忽略所有其他未标记为“!important”关键字的样式值。所以你可以覆盖:

.divclass .morespecific .evenspecificerer {
    color:blue;
}

与

.evenspecificerer {
    color:black !important;
}

然而

有很多嵌套的 css 树(即 evenspecificer = 3 层嵌套)会让你最终得到非常复杂的 css 结构，这是一种典型的糟糕代码味道。使用“!important”关键字的样式表也是如此，使用它通常意味着您在创建 css 之前犯了错误，应该告诉您需要重新考虑您的样式表。

相反

什么是最佳选择:为有意义的类定义 css。这意味着您可能不应该为 div 元素定义填充或边距，因为您最终会不断地覆盖这些属性。而是定义一个名为“padding-top-10”的类，它具有唯一的属性:padding: 10px;。这允许您创建一个非常通用的样式表，没有复杂的结构，有很多嵌套或讨厌的 '!important' 用法。