css - Bootstrap Stylesheet 仅适用于一个 div，但仍会影响其他 div

Question

我在 PHP 文件中包含了一个 Bootstrap 样式表，我只需要一个 div。问题:它应该只影响这个 div。为此，我在 bootstrap-stylesheet 前后放置了一个指向另一个 CSS 的链接，如下所示。但似乎 bootstrap.css 仍然影响该 div 之外的一些元素。我怎样才能阻止它这样做？

<link rel="stylesheet" href="style/style-1.css" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<div class="container">
...
</div>
<link rel="stylesheet" href="style-1.css" type="text/css">

Answer 1

CSS 中有一个名为“scoped css”的特性……它没有得到很好的支持(我相信仅限于 Fireofx……而且我认为这样更好)……它允许说样式表仅适用于单个元素。

在你的情况下，但我绝对不推荐它，你可以这样做:

<div class="container">
    <style scoped>
    //... copy content from bootstrap stylesheet
    </style>
</div>

示例见此处:http://css-tricks.com/saving-the-day-with-scoped-css/

或此处:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet

在这里查看哪些浏览器支持它:http://caniuse.com/#feat=style-scoped