Question

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

例如：

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

styles.css的：

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

bootstrap.css：

div {
    padding: 0;
    margin: 0;
}

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

我想也许这可能是jQuery或类似的东西。

Answer 1

忽略已为特定类或标记定义的某些css的最佳方法是覆盖更具体的情况。 CSS将为特定样式属性（例如填充或边距）选择最具体的值，例如：：

autocompleteDeparture = new google.maps.places.Autocomplete(departureField, options);

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

覆盖其他html的另一种方法是使用'！important'关键字，该关键字告诉浏览器忽略未使用'！important'关键字标记的所有其他样式值。所以你可以覆盖：

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

与

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

然而

有很多嵌套的css树（即evenspecificer = 3级嵌套）会让你以非常复杂的css结构结束，并且是典型的坏代码气味。使用'！important'关键字的样式表也是如此，使用这通常意味着你先创建了你的css错误，并且应该告诉你需要重新考虑你的样式表。

相反

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

Answer 2

在styles.css之后附上bootstrap.css。这仍然适用于引导程序，但会被styles.css覆盖。

您也可以使用！important规则用于样式声明，此声明会覆盖任何其他声明。

或者通过JQuery或Javascript获取DOM元素来操作样式，但是这种方法也是一种覆盖。我没有看到停止收听某个样式表的方法。

详细了解！important：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 3

一种可能的解决方案是使用比引导规则更具体的重置css，并且可以覆盖它们。例如：

div.reset {
    ....default rules for a div
}

你的div应该是这样的

  <div class="reset">....</div>

Yahoo有一些用于此目的的css资源http://yuilibrary.com/yui/docs/cssreset/

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

3 个答案:

然而

相反