Question

关于如何正确安排一些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>

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

非常感谢。

Answer 1

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

编辑：以及我的快速提示：请注意设置width: 100%和border: 1px solid black，因为除非您设置{{1}，否则不会在项目的宽度中计算边框属性

我的意思是，如果你有一个1024px宽的屏幕，你提供的css页脚宽度为1026px，右侧有2px裁剪

Answer 2

根本不建议在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 {}

Answer 3

当您在css中引用ID或类时，您必须使用您选择的类或ID的全名。例如，如果要引用具有div的{{1}}元素，则必须在样式表中编写id="someid"以引用此ID。

无论如何，你正在考虑它，但你的语法有点偏。以下是您可能正在寻找的内容：

#someid {

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

编辑： Here is a jsfiddle

查看您的代码，可以发现明显的“坏习惯”是ID /* 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; }，page1和page2都在页脚page3中这些页面有点令人困惑，因为“页面”并不完全唯一地定义页脚。确保在任何页面上只使用一个同名的id，如果你使用id，它应该唯一地描述该元素。

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

Answer 4

您需要<div class="footer" ID="page1">选择.footer#page1。我建议使用class for page＃，因为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>

如何正确使用CSS类和ID

4 个答案: