gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 01:18:28 25 4
gpt4 key购买 nike

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

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

例如,style_1.css 影响:

<header>...</header>

和 style_2.css 影响:

<main>...</main> 

最佳答案

直接使用那些分发的 CSS 文件是不可能的,但您可以为每个 CSS 框架库(或 CSS 文件)创建命名空间,并在您想要使用该框架功能的任何地方使用它。

参见 How to namespace Twitter Bootstrap so styles don't conflictIs there any ready to use Bootstrap css file with prefix有关如何命名样式表的更多详细信息。

如果您使用 ,然后您可以通过向 bootstrap 添加 pregfix 来创建命名空间,如下所示:

.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>

结果是这样的:

CSS namespaces

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

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

在这里你可以查看bootstrap.cssjquery.ui.csswww.css-prefix.com 生成并手动清洁。

关于html - 将样式表仅应用于 HTML 文件的特定区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45572399/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com