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

Question

我有一个使用 bootstrap CSS 制作的导航栏。我想将它添加到我的网站，该网站已经有它的 CSS 样式表，当我附加两个样式表时，它会发生冲突并弄乱我所有的样式。有没有一种方法可以轻松添加 CSS 样式表并使其仅应用于一个特定的 div？

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

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

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

有没有一种方法可以将#mydiv 放在引导样式表中的所有 CSS 规则周围(例如 #mydiv { #header {CSS rule} #content {CSS rule} } 以便仅应用该规则到一个 div 或执行类似该效果的操作？我知道该示例行不通，但是是否可以执行类似于该效果的操作来解决我的问题？

Answer 1

这是一种实现方式:

1. 您可以从 GetBootstrap.com 的自定义中获取适当的 css页

2. 如果有导航栏，则将 id="mynav"添加到导航栏的父级，或者将导航包装在 id="mynav"的 div 中

3. 打开您下载的 bootstrap.css，删除任何不需要的 css(如果它与您所拥有的重复，则可能进行规范化)。

4. 找到所有navbar相关的样式，放一个#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 使用的 box-sizing:border-box 。如果你看到困惑，回到你自己的 CSS——而不是 Bootstrap 的，并调整数学(包括所有边框和填充)。阅读 box-sizing:border-box 以了解更多信息。