CSS ID 与类答案

【问题标题】：CSS ID vs ClassCSS ID 与类
【发布时间】：2010-11-01 12:38:51
【问题描述】：

CSS ID 和 CSS Class 的基本区别是什么？

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

喜欢

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;
}

【问题讨论】：

可能重复，stackoverflow.com/q/544010/425313

标签： css class

【解决方案1】：

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

【讨论】：

【解决方案2】：

有关差异的描述，请参阅this answer。

一般来说，你使用 id's for 造型你知道的只是例如，将出现一次，诸如高级布局div之类的东西诸如侧边栏、横幅区域等。

在样式所在的地方使用类重复，例如说你头特别错误消息的标题形式，您可以创建一个样式 h1.error {} 仅适用于

【讨论】：

【解决方案3】：

将 ID 想象成您的学生证。你的学校里只有一个存在——你的。把班级想象成一群孩子……他们都属于同一个班级：“生物学”。如果您想针对特定学生，您可以通过确认他/她的 ID 来实现 - 因为这永远不会针对超过一个学生。如果您想向一群学生发表讲话，可以通过确认他们的班级来做到这一点 - “生物课今天将享用比萨饼”与“乔纳森·桑普森今天将享用比萨饼”。

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

外卖：

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

【讨论】：

我猜你的意思是“把 ID 当作你的学生 ID”。
你是对的。比“你的班级 id...”更容易混淆 :) 改变了。

【解决方案4】：

最后一点——一些浏览器允许多个相同的“id”值，但你绝对不应该这样做，因为它会破坏遵循标准的浏览器。

【讨论】：

如果您要尝试使用 document.getElementById() 来选择其中一个人，尤其如此……

【解决方案5】：

.class 将影响“class”属性中匹配值的元素。 style by id 会影响“id”属性中匹配值的元素。

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

【讨论】：