仅将样式表应用于 HTML 文件的特定区域答案

【问题标题】：Applying a stylesheet to only a certain region of an HTML file仅将样式表应用于 HTML 文件的特定区域
【发布时间】：2017-08-08 15:29:31
【问题描述】：

我正在为我喜欢的导航栏使用 bootstrap，并且我使用 bootstrap 中的 style.css，但我还想从另一个具有自己 style.css 的框架中实现一些元素。问题是元素看起来扭曲了，因为第二种样式重写了第一种样式。

有没有办法指定 style.css 的影响？

例如，style_1.css 要影响：

<header>...</header>

和 style_2.css 影响：

<main>...</main>

【问题讨论】：

不支持 AFAIK。
您可以尝试将!important 属性添加到不会被覆盖的 CSS 中
您应该阅读“特异性”。 css-tricks.com/specifics-on-css-specificity 一旦你理解了它，你就会知道如何完成你的要求。一旦你得到它，你几乎不必使用!important。
@WojtekT，这不是个坏建议，CSS 允许您选择和设置元素样式。您不需要每个元素上的类名，也不需要自定义标签来分别设置两个部分的样式。那里有lot's of selectors。

标签： html css

【解决方案1】：

不可能直接使用那些分发的 CSS 文件来实现，但您可以为每个 CSS 框架库（或 CSS 文件）创建命名空间，并在任何您想使用该框架功能的地方使用它。

请参阅How to namespace Twitter Bootstrap so styles don't conflict 和Is there any ready to use Bootstrap css file with prefix，了解有关如何命名样式表的更多详细信息。

如果您使用的是less，那么您可以通过向引导程序添加前缀来创建命名空间，如下所示：

.bootstrap-styles {
  @import 'bootstrap';
}

/* OR */

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

您可以使用http://www.css-prefix.com/ 为任何 CSS 文件添加前缀，然后像这样使用它：

<header class="bootstrap-ns-prefix> (some bootstrap code inside) </header>

<main class="style2-ns-prefix"> (some other framework/css styles that don't get affected by bootstrap) </main>

编辑

它不会自动工作，您必须为每个 CSS 命名，然后使用这些 CSS 文件而不是首字母。生成器www.css-prefix.com 对我有用，但它在开始/结束和每个评论之前/之后添加了一些额外的类/命名空间；在继续之前，您应该检查并更正/删除任何错误。正如我上面提到的，您可以使用 LESS 或 SASS 框架来生成这些命名空间。

下面是同时使用 Bootstrap 和 jQuery UI 的示例：

<head>
...
<link rel="stylesheet" href="css/bootstrap_ns.css">
<link rel="stylesheet" href="css/jqueryui_ns.css">
...
</head>
<body>

<button class="btn btn-primary">Test Button</button>

<div class="bootstrap-ns">
 <button class="btn btn-primary">Bootstrap Button</button>
</div>

<div class="jqui-ns">
 <button id="jqbtn" class="btn btn-primary">jQuery UI Button</button>
</div>

<script type="text/javascript">
jQuery(function($) {
    $('#jqbtn').button();
});
</script>
</body>

结果是这个：

如您所见，所有三个按钮都有引导按钮类btn btn-primary，但只有bootstrap-ns 容器内的按钮使用引导样式。

在这里你可以看到一个演示页面：http://zikro.gr/dbg/html/bootstrap-ns/

这里可以查看www.css-prefix.com生成的bootstrap.css和jquery.ui.css并手动清理。

【讨论】：

我尝试了你的建议，但不知何故prefix.com不支持css通常具有的内联代码，所以最后当我尝试在html中链接它时，它没有任何效果，因为转换器会破坏代码。
@AMayer 检查我编辑的答案。 css-prefix.com 生成的 CSS 文件需要一些检查和清理，但还有其他方法可以为 CSS 文件添加命名空间前缀。
我明白了，它可能适用于一项简单的任务，但对于我所拥有的却没有。加上前缀后清理工作太多了。
我只是给了你一个可行的方法。不，它不仅适用于像我的演示这样的简单任务。我已经将这种方法用于大型门户网站和 Wordpress/Joomla 网站，完全没有问题。不仅我，很多开发者都是这样做的。真正清理它并不是什么大不了的事；使用 LESS 或 SASS 构建一个没什么大不了的。无论如何，祝您找到解决问题的方法。
我并没有忽略您的解决方案，对我来说，在我输入前缀后，它没有正常工作，我猜我需要清理的 css 文件中有太多错误向上。我搜索了less，安装了它，但不明白如何使用该工具。

【解决方案2】：

我遇到了同样的问题，我是这样解决的：

复制您要在特定区域使用的 CSS 规则。
通过将它们粘贴到此链接中将它们转换为 SCSS：css2scss 然后

点击箭头（选择 SCSS）。
复制您获得的 SCSS 规则结果，并将其粘贴到此链接中：scss2css。

使用以下规则包装整个 SCSS 规则：.wrapper {}

像这样：

.wrapper {
           a  {
                 color: #007bff;
                 text-decoration: none;
                 background-color: transparent;
               }

             /*all other rules*/
         }

单击“编译”按钮并等待，直到您获得所有 CSS。

上面的 SCSS 会变成这样：
```
.wrapper a {

            color: #007bff;
            text-decoration: none;
            background-color: transparent;

            }
```
因此所有您的其他 CSS 规则将以 .wrapper 类为前缀。
单击下载按钮下载您的 CSS，然后将其链接到您的 HTML

页面。

仅在某些区域使用此 CSS warp 带有 div 的区域

并给这个 div 一个类“包装器”。

<div class = "wrapper">
  <a class = "a_Class_From_The_Downloaded_CSS_File"/>
  <!-- put here all other HTML tags you want
      and add all the class etc. you want from the 
      CSS file you created.
      it will not collide with other CSS class from other
      CSS files because of the div.wrapper tag 
      -->

</div>

【讨论】：

【解决方案3】：

一般不会。但是，您可以在任何地方使用 > 选择器：

#divtoApplyTo > a {
 color: green;
}

所以只有该特定 div 中的所有链接都会更改。

【讨论】：

我不太明白如何使用它。我可以将它应用于具有 20 000 行的整个 css 吗？
@amayer 不，可能找到并替换：/

【解决方案4】：

这是不可能的。样式表应用于整个文档而不是它的小节。元素是否受规则影响则取决于使用的选择器。接下来，当您希望规则仅适用于 <header> 中的元素时，它们必须以 header > 或 header (space) 开头。

但是，从您的 cmets 可以看出，重写所有规则不是一种选择，因为它太多了。一个解决方案可能是使用像 SASS 这样的预处理器。

例子：

输入 (SASS)

header > {
  div {
   color: red;
  }

  button {
    border: 1px solid hotpink;
  }
}

输出 (CSS)

header > div {
  color: red;
}

header > button {
  border: 1px solid hotpink;
}

我们的想法是将只对<header> 有效的所有规则包装到适当的块中，并让 SASS 为您重写规则。

但是，这会导致整个文件大小变大。此外，不应忘记框架还包括全局规则。由于 header > html 或 header > body 之类的内容是伪造的，因此此解决方案可能仍需要进行手动更改。

【讨论】：

【解决方案5】：

没有尝试过，但发现：最后的解决方法是使用 SASS（由场外人员推荐），因为它允许您嵌套元素，然后自动生成最终的 CSS。分步流程为：Applying CSS styles only to certain elements

连接两个引导文件（bootstrap.css 和 bootstrap-responsive.css) 转换为 bootstrap-all.css。
创建一个新的 SASS 文件 bootstrap-all.scss，内容为 div.bootstrap {。
将bootstrap-all.css 附加到bootstrap-all.scss。
通过将} 附加到bootstrap-all.scss 来关闭div.bootstrap 选择器。
在bootstrap-all.scss 上运行 SASS 以生成最终的 CSS 文件。
在最终文件上运行 YUI Compressor 以生成最小化版本。
将最小化版本添加到头部元素并包装我想要的所有内容在<div class="bootstrap"></div> 中应用的样式。

【讨论】：