Question

我想我理解如何使用ID和类（HTML页面上的单个元素的ID，许多元素的类）。但是为什么首先要考虑ID;为什么不只是使用类来做所有事情？

Answer 1

使用id时使用脚本定位特定元素要容易得多。
ID有高度的CSS specificity。如果您有一些具有相同类的元素，并且您需要将特定样式应用于其中一个元素，则可以使用Id。由于id具有更多的特异性，因此将覆盖类所应用的css ......

例如，请考虑以下情况

HTML

<div class='box'></div>
<div class=' red box'></div>
<div id='red' class='box'></div>
<div class='box'></div>
<div class='box'></div>

CSS

.red{
 background:red;
}
#red{
 background:red;
}
.box{
 width:50px;
 height:50px;
 background:dodgerblue;
 margin:5px;
}

此处，只有id为红色的元素才会有红色背景，如JSFiddle所示。类red应用的css将被box类中的css覆盖，因为它们具有相同的特异性，稍后会出现.box。

旁注：你也可以使用!important关键字覆盖css，但恕我直言，这是一个不好的做法。假设你为一个元素应用了!important关键字的css属性，而你的同事正在尝试使用类似javascript / JQuery的东西来修改相同的属性 - 他会很困惑为什么这些样式没有被应用 - 即使脚本是注入内联样式，它不会覆盖!important规则。但是如果你使用更具体的选择器，比如我们的情况下的ID，内联样式将优先于预期，这将避免混淆并可能节省一点时间

Answer 2

因为ID比类更重要。如果你做这样的事情：

.hello {
    color: green;
}

#goodbye .hello{
    color: red;
}

每个班级你好都会有绿色，但当他们在一个id为再见的div里面时，他们都会变成红色。

因此，有时使用id非常重要，因为它们比类强大得多。

Answer 3

至少有两个原因：

它增加了你的DOM结构。
使用JavaScript更容易定位具有ID的元素。

为什么要在HTML / CSS中区分ID和类？

3 个答案: