CSS中id和class的区别以及何时使用它

Question

CSS中id和class的区别以及何时使用它

<style>
    #main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }</style><div id="main">
    Welcome</div>

在这里我给了一个id到div元素，并为此应用相关的CSS。

或

<style>
    .main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }</style><div class="main">
    Welcome</div>

现在我给了一个class到div它也在为我做同样的工作。

那么，两者到底有什么区别呢？ID和班级，等级我应该什么时候使用id我应该什么时候使用class？我是CSS和网页设计方面的新手，在处理这个问题时有点困惑。

Answer 1

例<div id="header_id" class="header_class">Text</div>#header_id {font-color:#fff} .header_class {font-color:#000}(请注意，CSS使用前缀#对于ID和.)不过 color是HTML 4.01<font>标记属性在HTML 5中不受欢迎。在css中没有“字体颜色”，样式是color因此，上述案文应为：例<div id="header_id" class="header_class">Text</div>#header_id {color:#fff} .header_class {color:#000}文字应该是白色的。

Answer 2

ids是独一无二的每个元素只能有一个id每个页面只能有一个元素。idclassES并不是唯一的你可以用同样的class多元素。您可以使用多个class在同一元素上。JavaScript关心JavaScriptPeople可能已经更符合以下几个方面的差异：classES和idJavaScript依赖于只有一个具有任何特定内容的页面元素。id，或者其他常用的getElementById功能不能依赖。