CSS 中的 id 和 class 有什么区别，什么时候应该使用它们?

2022-01-30 00:00:00 html css 
#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.

或

.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 和网页设计的新手，在处理这个问题时有点困惑.

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 标签属性，在 HTML 5 中已弃用.在 CSS 中没有font-color"，样式是 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}

文本将是白色的.

相关文章