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

Question

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

5

我有一个使用Bootstrap CSS制作的导航栏。我想将其添加到已经具有CSS Stylesheet的网站上，但当我附加两个样式表时，会发生冲突并破坏所有样式。是否有一种简单的方法可以添加CSS Stylesheet，并仅将其应用于特定的div？

例如，是否有一种方法可以仅在该id上加载CSS？

Bootstrap CSS非常大，因此我希望有一种方式，不需要在数百个CSS规则之前添加#myid。

编辑：看起来这个问题被解释错了。问题不是如何获取导航栏CSS，因为那还会弄乱其他样式。

有没有办法在Bootstrap样式表中将#mydiv括号起来（例如#mydiv{ #header{CSS规则} #content{CSS规则} }），以便规则仅适用于一个div或执行类似的操作解决我的问题？我知道这个例子行不通，但是否有类似的解决方案可以解决我的问题？

- etangins

2

“我是否可以轻松添加CSS样式表，并使其仅适用于特定的div？”理论上是可以的，使用HTML5的scoped样式，但目前大多数浏览器都不支持它。 - CBroe

使用自定义嵌套元素，例如Polymer，可以实现。 - Stubbies

1

你应该问的问题是：“我怎样只使用Bootstrap中的导航栏样式？”你正在询问的并不被推荐。你需要了解CSS继承的原理。可以查看Bootstrap源码中的单独模块：https://github.com/twbs/bootstrap/blob/master/less/navs.less - Craig

1

我之所以不仅仅询问导航栏样式的原因是因为有些样式适用于不仅仅是导航栏，而且对导航栏也有益处。 - etangins

2个回答

2

您也可以使用Less CSS来开发您的主题。从Github下载less master，然后使用Less编译器，如winLess（适用于Windows）、simpLess和Koala（支持Windows、Mac和Linux）来编译您的Less文件。

- CodeBriefly

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christina · Accepted Answer

这是一种方法：

您可以从GetBootstrap.com的自定义页面获取相应的CSS。
如果有父级导航栏，请将id =“mynav”添加到其父级中，或者将导航包装在具有id =“mynav”的div中。
打开您下载的bootstrap.css，删除任何不必要的CSS（如果它是您已经拥有的内容的重复，则可能会规范化）。
查找所有与导航栏相关的样式，并将# mynavbar（空格）.navbar放入其中。
然后，您将打开自己的CSS并在受影响的样式前面放置# mynav。
由于导航和所有Bootstrap都使用边框框大小，因此您必须更改YOUR 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/

切换如下：

enter image description here

向下滚动并根据需要对导航栏的颜色和其他内容进行调整：

enter image description here

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

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

您没有提到什么冲突，但通常是.container类相同或全局--且必要--box-sizing:border-box与Bootstrap使用的相同。如果您看到混乱，请返回您自己的CSS--而不是Bootstrap的--并调整数学（包括所有边框和填充）。阅读有关box-sizing:border-box的更多信息。