是否可以使css文件仅适用于特定标记？

Question

让我们举个例子。我有一个bootstrap.css文件，我希望它只适用于特定的<div>。 div的其余部分不应受到影响。有谁知道如何做到这一点？

或者假设相反：有一个bootstrap.css文件。如何排除特定div的样式。

我知道我们使用：not（xyz）来删除样式，对于这样的事情是他们的任何方式：not（文件名）？我想这可以用javascript完成。

Answer 1

在<div>上添加一个独特的课程。

然后将此div中的所有样式放在css中的选择器定义中。

例如：

<div class='i-am-unique-sitewide'></div>

和

.i-am-unique-sitewide {
    /* styles */
}

只要文件加载到需要它的页面上并且该类只被添加到您尝试定位的div中，它进入哪个文件或该文件中的其他文件无关紧要（虽然你可以自由地在其他地方添加它。）

Answer 2

当你写这篇文章时，你想要这样做是因为bootstrap（但是如果你有一个包含很多样式的大文件，同样的问题也适用），你必须为文件中的每个现有文件添加额外的选择器定义（如果使用纯CSS），或者您可以将整个文件包装在嵌套结构中，例如在LESS或Saas中支持，例如：

#my-unique-div {

... content of bootstrap file here ...

}

您还可以将引导程序文件重命名为bootstrap.less，这样可以使引导程序文件处于原始状态：

#my-unique-div {

    @import "bootstrap.less";

}

此外，如果预计需要额外的此类div，请使用class。如果它真的只是你写的一个div，请使用id，以便更好地发出意图信号。

Answer 3

如果您希望bootstrap.css仅针对特定scope:{ localData: "=dataminislider" }, 工作，那么您应该为<div>分配id，如：

<div>

之后，在bootstrap.css中，只在以下选择器下编写CSS：

<div id="mydiv">