Question

我有各种各样的CSS基本上我想确定页面每个部分使用的样式表，例如我希望我的导航栏使用导航样式表，其中页面的其余部分可以使用主样式表。有什么想法吗？

Answer 1

你不能这样做。样式表适用于整个页面。您必须简单地使选择器具有足够的特定性，以便样式仅应用于预期的元素。

在您的示例中，您可以将导航项目放在<ul id="nav">下。所有特定于导航的样式都应以#nav选择器开头，以确保它们不会意外地应用于页面上的任何其他元素：

#nav li { color:#000; }
#nav li.active_item { color:#f00; }
/* etc */

Answer 2

使用iframe，或使用css类。请记住，css类可以组合使用：

<div class="class1 class2 and-so-on">...</div>

因此，您可以使用一个仅针对class1的样式表，一个仅针对class3的样式表...并正常导入所有样式表。

Answer 3

这是不可能的，因为CSS适用于整个页面。为了实现您的目标，您应该将页面划分为不同的部分，例如为每个部分提供唯一的ID。这样，您可以将单独的样式应用于页面的各个部分。

例如，您的导航div可以有id="navigation-bar"，然后在CSS中写下：

#navigation-bar {

  /* styles here will apply only to navigation-bar and elements inside it */

}

等等......

Answer 4

如果您的CSS不是太大，您应该将它合并到一个文件中。这将提高您的下载速度，并使用户更容易。

如果您希望将样式分开，请在CSS中使用注释，例如

#######NAV STYLES######

.nav li {something:something;}
.nav li a {something:something;}

######MAIN STYLES######

#main #wrapper {something:something;}

Answer 5

如果你想分开你的CSS以便更容易管理。您可以将css分成单独的文件并调用使用@import url();。例如：

core.css就是这样：

//Navigation styles
@import url("navigation.css");

//Banner styles
@import url("banner.css");

//Footer styles
@import url("footer.css");

然而，这将创建一个样式表，其中包括单独引用的样式表。

制作不同的样式表适用于页面的不同区域

5 个答案: