将CSS样式表仅应用于一个Div

Question

我有一个使用bootstrap CSS制作的导航栏。我想将它添加到我已经拥有其CSS样式表的网站上，当我附加两个样式表时，它会冲突并混淆我的所有样式。有没有办法可以轻松添加CSS样式表并让它只适用于一个特定的div？

例如，有没有办法只能在该ID上加载CSS？

Bootstrap CSS非常庞大，所以我希望有一种方法不需要在数百个CSS规则的每一个之前添加#myid。

编辑看来这是在错误的方向解释。问题不在于我如何才能获得导航栏CSS，因为这仍然会弄乱其他样式。

有没有办法可以在引导程序样式表中围绕所有CSS规则放置#mydiv（例如#mydiv {#header {CSS rule} #content {CSS rule}}，以便仅应用规则一个div或做一些类似于那种效果的东西？我知道这个例子不会起作用，但是有什么东西可以用来解决我的问题吗？

Answer 1

这是一种方法：

1. 您可以从GetBootstrap.com自定义获取相应的CSS 页

2. 添加id =＆＃34; mynav＆＃34;到导航栏的父级，如果有的话或将导航包装在div中，并且id =＆＃34; mynav＆＃34;

3. 打开你下载的bootstrap.css，删除任何不必要的css（如果它重复了你的内容，可能会正常化）。

4. 找到所有与导航栏相关的样式，并放入#mynavbar（空格）.navbar

5. 然后您将打开自己的CSS并将#mynav放在受影响的样式前面。

6. 由于导航和所有Bootstrap都适用于边框大小调整，因此您必须在您的CSS中更改数学。

HTML - 仅示例：

    <div id="mynav"><header class="navbar navbar-static-top">
    ...
    </header></div>

CSS示例，其中包含大量内容，因此您必须先添加#mynav

    #mynavbar .navbar {styles}

---

您可以从GetBootstrap.com的自定义页面获取导航栏和相关的css和js：

http://getbootstrap.com/customize/

切换如下：





向下滚动并根据需要进行其他调整，例如导航栏：



然后再次向下滚动并单击下载。

下载将包含您选择的CSS。然后你打开你得到的bootstrap.css文件，你会看到normalize css和其他基本设置以及导航栏，没有其他样式。如果存在冲突的类，请重命名它们并将它们应用于您的HTML。

你没有提到什么是冲突，但通常它的.container类是相同的，或者是全局的 - 必要的 - 盒子大小：Bootstrap使用的border-box。如果你看到陷入困境，请回到你自己的CSS - 而不是Bootstrap，并调整数学（包括所有边框和填充）。阅读box-sizing：border-box以了解更多信息。

Answer 2

您还可以使用less css来开发主题。 download less master from github

使用较少的编译器，例如winLess用于Windows，simpLess和Koala（支持windows，mac和linux）编译较少的文件。