Scoped CSS

Question

我想在我正在使用的某个网站上使用twitter bootstrap。此站点需要预先设置的模板才能用于页面的某些部分。

如果我包含twitter bootstrap样式表，它会弄乱原始模板。

我想要包含外部bootstrap.cc样式表，但只使它适用于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>

我知道一种方法是编辑css并在每个标记之前添加.mycontent。但我想知道是否有更智能的解决方案

Answer 1

Scoped CSS

如果存在scope属性，则<style>仅适用于其父元素。

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

它缺乏浏览器支持，但有一个polyfill：jQuery Scoped CSS plugin。

补充阅读：Saving the Day with Scoped CSS。

当前浏览器支持：http://caniuse.com/#feat=style-scoped

Answer 2

你可以看到你的代码：

<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>

你使用的是错误的路径你应该试试<link href="bootstrap.css">
我希望你的问题能解决这个问题

将样式表限制为一个标记和后代

2 个答案:

Scoped CSS