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

Posted 2023-02-22

技术标签:

【中文标题】将样式表限制为一个标签和后代【英文标题】：Limit Stylesheet to one tag and descendents 【发布时间】：2012-08-20 02:16:59 【问题描述】：

我想在我正在开发的某个网站上使用 twitter 引导程序。此网站需要为页面的某些部分使用预设模板。

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

我想包含外部 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。但我想知道是否有更聪明的解决方案

【问题讨论】：

在原始样式表之前包含 bootstrap，因此您的样式会覆盖 bootstrap 中的样式。在大多数情况下都有效....但是，如果在引导程序中有修改而我的原始样式表中不存在，则会失败 【参考方案1】：

作用域 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

【讨论】：

【参考方案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"> 我希望你的问题能得到解决

【讨论】：

好吧，这是一个错字......我的问题仍然存在......我希望外部样式表只影响 mycontent 下的元素

以上是关于将样式表限制为一个标签和后代的主要内容，如果未能解决你的问题，请参考以下文章