使不同的syle表应用于页面的不同区域

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不是太大，你应该把它合并到一个文件中。这将提高您的下载速度，让用户更轻松。

如果你想将样式分开，可以在CSS中使用注释，例如

#######NAV STYLES######
.nav li {something:something;}
.nav li a {something:something;}
######MAIN STYLES######
#main #wrapper {something:something;}

Answer 4

如果您想分离css以使其更易于管理。您可以将css分离为不同的文件，并使用@import url();调用。例如：

core.css应该是这样的：

//Navigation styles
@import url("navigation.css");
//Banner styles
@import url("banner.css");
//Footer styles
@import url("footer.css");

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

Answer 5

这是不可能的，因为CSS应用于整个页面。为了实现您想要的内容，您应该将页面划分为不同的部分，例如为每个部分提供一个唯一的ID。通过这种方式，您可以将不同的样式应用于页面的不同部分。

例如，你的导航div可能有id="navigation-bar"，然后在CSS中你会写：

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

等等…