2

在获得一些初学者建议后，请就如何正确安排一些 CSS。

我有一个基本的 3 页网站。每个页面都将在底部显示一个页脚。页脚将在每个页面上保持主要样式相同（例如宽度、高度等），但我想根据我所在的页面（背景颜色、字体颜色）更改其他样式。我知道这是可以做到的，但我正在寻找一些关于正确使用语法的提示，所以不要学习使用坏习惯，除非这当然是正确的？

我在 CSS 中的内容是：

.footer
{
    width: 100%;
    height: 100px;
    border: 1px solid black;
    text-align: center;
}

#footer_page1
{
    background-color: red;
    font-color: white;
}

#footer_page2
{
    background-color: blue;
    font-color: white;
}

#footer_page3
{
    background-color: white;
    font-color: black;
}

...并在我拥有的 HTML 中调用它：

<div class="footer" ID="footer_page1">
    Some text here
</div>

这可以吗，还是应该以更好的方式完成？

非常感谢。

4

4 回答 4

4

您应该使用 id#footer和 class.page1, .page2, .page3等 - 这是一个更好的尝试，因为您仍然有相同的页脚（所以 ID 应该相同）并且您只想更改某些内容（可以使用不同的类来完成）

编辑：和我的一个快速提示：小心设置width: 100%，因为除非你设置属性border: 1px solid black，否则边框不会在项目的宽度中计算box-sizing: border-box

我的意思是，如果你有一个 1024px 宽的屏幕，你展示的带有 css 的页脚将是 1026px 宽，右侧裁剪 2px

于 2013-02-13T22:46:26.603 回答
1

完全不建议在 CSS 中使用 ID，尽管它有时很有用。事实上，我建议不要使用除了类和伪类之外的任何东西，偶尔也不要使用属性选择器（尽管我个人一直使用 ID 和元素选择器，主要是出于懒惰）。这样做的原因是您只需要在级联中使用一个级别，这可以大大简化样式表中的事情，尤其是当它们变得非常大时。

.footer { /* default styles */ }
.page1 { /* this is already after the .footer ruleset, so it overrides
    the earlier rules automatically (by the nature of CSS */ }
.page2 { /* and so on */ }

<div class="footer page1">
    Some text here
</div>

您还可以将类添加到整个页面的容器或其他内容中，这可能更有意义。这样您就可以同时操作页眉和页脚规则集：

.footer {}
.header {}
.page1 .footer {}
.page1 .header {}
于 2013-02-13T22:50:54.167 回答
1

当你在 css 中引用一个 id 或 class 时，你必须使用你选择的 class 或 id 的全名。例如，当您想引用一个div元素时，id="someid"您必须#someid {在样式表中写入以通过 id 引用此 div。

无论如何，您的想法是正确的，但是您的语法有点不对劲。以下是您可能正在寻找的内容：

/* common footer code goes here */
.footer
{
    width: 100%;
    height: 100px;
    border: 1px solid black;
    text-align: center;
}

/* code specific for each page goes here */
#page1.footer
{
    background-color: red;
    font-color: white;
}

#page2.footer
{
    background-color: blue;
    font-color: white;
}

#page3.footer
{
    background-color: white;
    font-color: black;
}

在同一行中使用两个选择器称为选择器链接。在这种情况下，您希望将 id 选择器与类选择器链接起来。

编辑： 这是一个 jsfiddle。

查看您的代码，可以发现明显的“坏习惯”是 id page1、page2和page3都在div这些页面的页脚中，这有点令人困惑，因为“页面”并没有完全唯一地定义页脚。确保在任何页面上只使用一个同名的 id，如果确实使用了 id，它应该唯一地描述该元素。

正如其他人所说，应该注意的是，最近避免使用 id 已成为一种好习惯（javascript 功能除外）。尽可能只使用类现在是标准。很高兴知道如何执行选择器链接，当然正确的语法总是很重要的。

于 2013-02-13T22:53:38.003 回答
0

您需要选择<div class="footer" ID="page1">。.footer#page1我建议对 page# 使用 class，因为 ID 在一个页面中应该是唯一的，但 ID="page1" 可能会经常使用。

最后的结果可以是

.footer
{
    width: 100%;
    height: 100px;
    border: 1px solid black;
    text-align: center;
}

.footer.page1
{
    background-color: red;
    font-color: white;
}

.footer.page2
{
    background-color: blue;
    font-color: white;
}

.footer.page3
{
    background-color: white;
    font-color: black;
}

和

<div class="footer page1">
    Some text here
</div>
于 2013-02-13T22:51:51.343 回答