Question

所以我认为我要么缺少一些非常明显的东西，要么让自己陷入一个令人讨厌的堕落，或者这显然是没有人真正谈论它。

我想在一个小网站上使用一个样式表，但我希望在某些页面上略有不同的布局。

示例：主页有右侧边栏;另一页是全宽的;另一个可能有三列。

就是这样。我正在创建的是具有不同尺寸的多个div，以适应各种格式。

IE中。 #rightSide; #leftSide; #fullWidth; #middleContent。

我的想法是，我会在每页使用某个div的组合，其他人会在需要之前淡入背景。

所以我创建了索引页面，它工作正常。这是一个3/4宽+右侧。现在我正在创建一个全宽......但它看起来仍然很好。

然而，我对css上的多个布局所做的所有研究都坚持我使用不同的样式表，即使是小的布局更改，如双列到全宽。我已经看到过这种方式使用CSS的零参考，但也许我使用了错误的关键词。为6-8页的网站创建3或4个样式表似乎有点过分。

那么我错过了什么？

Answer 1

只需在页面顶部设置一个样式标记，然后将所有特殊样式功能放在那里

您可以使用nth-child选择器：

div.class:nth-child(1) { specific style for first}

Answer 2

这很简单，您可以为多个页面使用多个类，例如您可以将css类用于blogpage并在body标签中使用它你的css会是这样的

.menu{color:red}
.blogpage .menu {color:green}

每页的

等等

Answer 3

您可以像往常一样在每个页面上包含样式表，但随后会覆盖每个页面的样式＆＃39;满足您的需求：

主页

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
/* Custome style for home page */
#rightSide {
    text-align: right;
}
</style>
</head>

第二页

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
/* Custome style for second page */
#leftSide {
    text-align: left;
}
</style>
</head>

<强> EDITED

您可以将每个页面包装在具有页面名称id的容器中。然后在每个页面的CSS stylsheyy中定位它。例如

HTML

<div id="homePage">
    <div class="mainDiv">
    </div>
    <div id="rightSide">
    </div>
</div>

CSS

#homePage .mainDiv {
    // style this home page only
}

#secondPage .mainDiv {
    // style this for second page
}
#homePage #rightSide {
    // style this home page only
}

#secondPage #rightSide {
    // style this for second page
}

具有单一样式表的多个布局

3 个答案: