CSS ID与类

CSS ID和CSS类之间的基本区别是什么

有人告诉我，ID一页只能使用一次。但我发现它可以多次使用

像

---

它只能分配给页面中的一个元素，但可以在多个CSS规则中使用。类名可以分配给页面中的多个元素。

有关差异的说明，请参阅

一般来说，你用id来表示 设计你所知道的东西只是 例如，将出现一次， 比如高级布局div 如边栏、横幅区域等

类在样式为的位置使用 重复，例如说你领导一个特殊的 错误消息的标题形式，您可以 无法创建样式h1.error{}，它 只适用于

---

把ID想象成你的学生ID。你的学校里只有一个——你的。把班级想象成一群孩子……他们都属于同一个班级：“生物学”。如果你想称呼一个特定的学生，你可以通过确认他/她的ID来称呼他/她，因为这永远不会称呼一个以上的学生。如果你想向一群学生讲话，你可以通过承认他们的课堂——“今天生物课将享受披萨”与“乔纳森·桑普森将享受披萨”

外卖：

• ID=学生ID（学校不会向多个学生发放相同的ID）
• 班级=一组学生（如“生物课”将进行实地考察）

---

最后一点注意：有些浏览器会允许多个相同的“id”值，但您绝对不应该这样做，因为这会破坏后续浏览器的标准。

类会影响与“类”属性中的值匹配的元素。 按id设置的样式将影响与“id”属性中的值匹配的元素

---

建议您不要在元素中重复ID值，因为这是当前页面上元素的唯一标识符。

我猜您的意思是“像学生ID一样考虑ID”。您是对的。与“您的类id…”相比，更不容易混淆：）已更改。尤其是如果您要尝试使用document.getElementById（）选择其中一个对象，则更是如此…可能重复，

body
{
        background-color: #3399FF;
}

div#menuPane{
    position: absolute;
    left: 25px;
    top: 25px;
    width: 25%;
}

div.menu {
    display: block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    border: 2px solid #7FC07F;
}

div.menu a {
    display: block;
    font-weight: bold;
    text-decoration: none;
    text-align: right;
    letter-spacing: 1px;
    margin: 0px;
    color: black;
    border-top: 1px solid #487048;
}

div.menu a:link{
    background: #33CCFF;
}

div.menu a:visited{
    background: #33CCFF;
}
div.menu a:hover{
    background: #3FC73F;
    letter-spacing: 2px;
}

div.menu h4{ 
    padding: 2px;
    margin: 0px;
}

div#content{
    position: absolute;
    left: 30%;
    top: 25px;
    width: auto;
    border: 2px double #7FC07F;
    background-color: #33CCFF;
    padding: 2px;
    margin-right: 5px;
}

div#content h3{
    background-color: #A3F4A3;
    text-align: right;
    letter-spacing: -1px;
    color: #386938;

    border-bottom: 1px solid black;
}

div#content a:link, a:visited{
    background:#0099FF;
    color: #A3F4A3;
    letter-spacing: 1px;
}

div#content a:hover{
    background: #FF0000;
    color: #A3F4A3;
    letter-spacing: 1px;
}   

<students>
  <student id="jonathan-sampson" class="biology" />
  <student id="lizza-matthews"   class="earth-science" />
  <student id="michelle-andrews" class="biology" />
</students>