Bootstrap Stylesheet only for one div, but still affects other divs

Question

I have included a bootstrap stylesheet in a PHP-File, which I only need for one div. Problem: It should only affect this one div. To achieve that, I placed a link to another CSS before and after the bootstrap-stylesheet as you can see below. But it seems that bootstrap.css still affects some elements outside that div. How can I prevent it from doing it?

<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

There is one feature in CSS called "scoped css" ... it is not well supported (Fireofx only, I believe ... and I think it's better this way)... It allows to say that a stylesheet applies only to a single element.

In your case, but I definitely do not recommend it, you could do something like :

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

See here for an example : http://css-tricks.com/saving-the-day-with-scoped-css/

or here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet

Check here to know which browsers support it : http://caniuse.com/#feat=style-scoped