CSS中的id和class有什么区别，什么时候应该使用它们? [英] What is the difference between id and class in CSS, and when should I use them?

问题描述

#main {
    background: #000;
    border: 1px solid #AAAAAA;
    padding: 10px;
    color: #fff;
    width: 100px;
}

<div id="main">
    Welcome
</div>

在这里，我给div元素添加了id，并为其应用了相关的CSS.

Here I gave an id to the div element and it's applying the relevant CSS for it.

OR

.main {
    background: #000;
    border: 1px solid #AAAAAA;
    padding: 10px;
    color: #fff;
    width: 100px;
}

<div class="main">
    Welcome
</div>

现在我在div中给出了class，它也为我做同样的工作.

Now here I gave a class to the div and it's also doing the same job for me.

然后 Id 和 class 之间的确切区别是什么，何时应使用 id ，何时应使用 class .?我是CSS和Web设计的新手，在处理此问题时有些困惑.

Then what is the exact difference between Id and class and when should I use id and when should I use class.? I am a newbie in CSS and Web-design and a little bit confused while dealing with this.

推荐答案

有关此 示例

<div id="header_id" class="header_class">Text</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

(请注意，CSS对ID使用前缀#，对类使用..)

(Note that CSS uses the prefix # for IDs and . for Classes.)

但是 color是HTML 4.01 <font>标记属性，在HTML 5中已弃用. 在CSS中，没有字体颜色"，样式为color，因此上述内容应为:

However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5. In CSS there is no "font-color", the style is color so the above should read:

示例

<div id="header_id" class="header_class">Text</div>

#header_id {color:#fff}
.header_class {color:#000}

文本将为白色.

这篇关于CSS中的id和class有什么区别，什么时候应该使用它们?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！