问题

I want to use twitter bootstrap for some site I am working on. This site requires a pre-set template to be used for certain parts of the page.

If I include the twitter bootstrap stylesheet it messes up the original template.

I want to include the external bootstrap.cc stylesheet but make it work only on tags which are a descendent of class="mycontent"

<html>
<link href="original stylsheet.css">
<link href="bootstrap.css">
...
...
<div class="header">
original stlesheet to be used here
</div>
<div class="mycontent">
bootstrap css to work for all descendents of my content
</div>

I know one way is to edit the css and add .mycontent before each and every tag. But I was wondering if there was a smarter solution

回答1:

Scoped CSS

If scope attribute is present, then <style> applies only to its parent element.

<div>
  <style scoped>
  /* your css here */
  <style>
  <!-- content -->
</div>

It lacks of browser support, but there is a polyfill: jQuery Scoped CSS plugin.

Additional reading: Saving the Day with Scoped CSS.

Current browser support: http://caniuse.com/#feat=style-scoped

回答2:

As you i can see your code :

<html>
<link rel="original stylsheet.css">
<link rel="bootstrap.css">
...
...
<div class="header">
original stlesheet to be used here
</div>
<div class="mycontent">
bootstrap css to work for all descendents of my content
</div>

you are using the wrong path.
you should try <link href="bootstrap.css">
I hope your problem will be solve with this

来源：https://stackoverflow.com/questions/12110708/limit-stylesheet-to-one-tag-and-descendents

标签

html