如何正确使用CSS Class和ID

刚刚过了一些初学者的建议请就如何正确安排一些CSS。如何正确使用CSS Class和ID

我有一个基本的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>

这是正确的，还是应该这样做更好办法？

非常感谢。

来源

2013-02-13 Harry

'id'属性是错误的。在HTML文件中，你有'page1'，但在CSS中是'footer_page1'，所以将'page1'改为'footer_page1' – rsz 2013-02-13 22:46:56

投票结束为“不建设性”，因为每个人都会对他们自己的偏好有不同的看法'最佳实践'。 – Sparky 2013-02-13 22:50:22

道歉，没有意识到会有几种方式被认为是“最佳做法”，因此，蠕虫能打开 - 无论哪种方式，如果像我这样的初学者阅读下面的一些评论，有一些非常有用和简洁的解释来帮助我们。感谢所有人的评论。 – Harry 2013-02-13 23:01:02

当你引用一个ID或类CSS，你必须使用你选择的类或ID的全名。例如，当您想要引用div元素时，您必须在样式表中编写#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; 
}

使用在同一条线上两个选择被称为selector chaining。在这种情况下，你想链接一个id选择器和一个类选择器。

编辑： Here is a jsfiddle。

看你的代码，明显的“坏习惯”，人们可以找到的是，IDS page1，page2和page3都在页脚的网页，这是一个比较混乱的div，为“页”没有按” t完全唯一地定义页脚。确保您只在任何页面上使用同一个名称的ID，如果您确实使用了ID，则应该唯一地描述该元素。

正如其他人所说，应该指出的是，最近避免使用id（JavaScript功能除外）已成为良好的做法。如果可能，只使用类是现在的标准。知道如何执行选择器链接是很好的，当然，正确的语法总是很重要。

来源

2013-02-13 22:53:38 Joey

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

编辑：和我一个快速提示：因为边界不是在项目的宽度计算，除非你设置要小心设置width: 100%和border: 1px solid black的box-sizing: border-box财产

这是什么意思是，如果你有一个1024像素的宽屏幕，你有预先的CSS脚注感觉会是1026px宽，2px在右侧裁剪

来源

2013-02-13 22:46:26 pwolaq

并且使用HTML5'

'元素将会很好。 – dsundy 2013-02-13 22:51:03

在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-13 22:50:54

您需要通过.footer#page1选择<div class="footer" ID="page1">。我会建议使用页面＃的类，因为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-13 22:51:51 Minime

如何正确使用CSS Class和ID

回答

相关问题